Design

ID #1041

Wie bekomme ich bei einem zweispaltigen CSS-Design beide Spalten gleich lang ?

Die Container selber bekommt man gar nicht dazu, die reagieren unabhängig voneinander.

Aber die Optik ist machbar. Dazu braucht man einen weiteren, übergeordneten Container, der eine entsprechende Hintergrundfarbe/Muster als Hintergrundgrafik hat. Einen schmalen Streifen mit der gewünschten Hintergrundfarbe und in der gewünschten Breite als gif nehmen und mit
background: #fff url(farbe.gif) repeat-y left;
sich links wiederholen lassen.

Dieser Streifen wird immer so lang wie der äußere Container und somit sieht es so aus, als ob auch der linke Container (z.B. mit dem Menü) immer mitwachsen würde mit dem Text in der rechten Spalte.
Ist aber nur eine optische Täuschung. ;-)

Ein guter Artikel hierzu ist Faux Columns bei A List Apart.

Wenn die inneren Container durch float positioniert sind, ist es aber wichtig, hinterher noch ein
clear:both;
zu definieren, da ansonsten der äußere Container natürlich nicht mitwächst!

Tags: -

Verwandte Artikel:

Letzte Änderung des Artikels: 2004-08-19 22:07
Autor: Terry
Revision: 1.0

Digg it! Share on Facebook Artikel ausdrucken Artikel weiterempfehlen Als PDF-Datei anzeigen
Übersetzungsvorschlag für Übersetzungsvorschlag für
Bewertung der Nützlichkeit dieses Artikels:

Durchschnittliche Bewertung: 4 (8 Abstimmungen)

vollkommen überflüssig 1 2 3 4 5 sehr wertvoll

Kommentieren nicht möglich

Kommentar von Florian:
Hallo,

gibt es auch eine Möglichkeit, um dies bei einem absolut positioniertem Design zu realisieren?

Bei der Variante mit float habe ich leider keine Möglichkeit die Inhalte/Navigation in unterschiedlicher Reihenfolge im HTML festzulegen.

Gruss,
Florian
Added at: 2038-01-19 04:14

Kommentar von fEdEr:
du könntest eine feste höhe für die container festlegen... oder das über \"minheight\" lösen... \"minheight\" wird aber beim IE nicht (?) interpretiert, also is \"height\" doch besser...
Added at: 2038-01-19 04:14

Kommentar von startcss:
ja ist es. du machst wie oben beschrieben einen grosser container um alles und gibst dann bei dem der sich mit ausdehnen soll einfach position: aabsolute; und tbottom: 0px; an. dann geht der immer bis ganz nach unten. startcss
Added at: 2007-05-15 09:35