CSS 2-Spalten-Layout - Wie maximiert man die Höhe der Säulentrennlinie?

Question

Ich habe zwei Spalten. Einer ist nach links schwebend, einer ist nach rechts geschwebt. Es folgt ein Clearing Div und dann ein Footer. Ich möchte eine vertikale Linie, um die beiden Spalten zu teilen, aber das Problem ist, es gibt keine Garantie, welche Spalte höher sein wird.

Ohne ein Hintergrundbild, wie bekomme ich eine Trennlinie zwischen den beiden Spalten, die die maximale Höhe der beiden verwendet?

Answer 1

Sie könnten versuchen, einen rechten Rand auf der linken floated div und einen linken Rand auf der rechten floated div. Sie würden dann einen negativen Rand auf der rechten floated div gleich der Breite der Grenzen setzen. Mit dieser Methode würden sich die Ränder perfekt überlappen, sodass sie wie eine einzelne Linie aussehen, die der Höhe des höchsten Divs entspricht.

UPDATE

Klingt wie dies Probleme in IE verursacht. Sie können auch versuchen, die Position im Spaltencontainer auf relativ festzulegen und dann die Position der untergeordneten Elemente auf absolut festzulegen. Die linke Spalte wäre oben: 0 und links: 0. Sie würden dann die rechte Spalte oben positionieren: 0 und rechts: (Breite der linken Spalte - Breite der Grenze). IE könnte damit etwas besser umgehen.

Answer 2

Wie sieht es mit der Erstellung eines 1px-Bildes aus? Wiederholen Sie dieses Bild im übergeordneten Container der beiden Spalten.

Ich hoffe, das macht Sinn.