Byteandi
Administrator
Dabei seit: 23.09.2006
Beiträge: 383
Level: 35 [?]
Erfahrungspunkte: 790.170
Nächster Level: 824.290
 |
|
| gleiche höhe der boxen bei mehrspaltigem layout |
     |
wer sich mit dem Tabellenlosen Layouten bereits beschäftigt hat, wird sehr häufig vor dem selbem Problem stehen.
Wie bekomme ich mehrere nebeneinander liegende div boxen auf eine gleiche Höhe?
Gute Frage, schnelle Antwort ---> Gar nicht.
Aber, dies wäre ja kein Tut, wenn es dafür nicht eine Lösung gibt 
fangen wir mal mit einem einfachem Problem an, ich hab ein zweispaltiges Layout, in dem eine Spalte sagen wir 200px breit sein soll und die andere 400px, beide spalten sollen eine unterschiedliche Farbe haben.
kümmern wir uns am besten zuerst um den html-code der ungefähr so aussehen sollte.
Das <br> steht dort unten nur, damit das floaten rechtmäßig beendet wird, anonsten sollte der html-code ja klar sein.
nun kommen wir zum css-code der als Besonderheit eine eingebundene Grafik haben wird.
wie man am css-code sehen kann, ist in keiner der Box eine Höhe angegeben, da diese ja auch variabel sein sollte, da ich ein padding von 10px angegeben habe, muss den boxen natürlich eine gewünschte breite, z.B. 200px - 20px gegeben werden, nicht dass sich einer wundert, warum ich von 200 und 400px breite spreche aber nur 380 und 180px angebe..
Ich habe wie man sehen kann in den css Angaben eine Grafik in der alles umschließenden div box eingebunden, diese Grafik die die breite des Layouts und die Höhe von 1px hat, wird in der gesamten Box auf der y-Achse wiederholt und simuliert nun das zweispaltige Layout.
durch diese Grafik und dadurch, dass hier mit zwei gefloateten div boxen gearbeitet wird, die sich nicht gegenseitig in die Quere kommen können hat es nun den Anschein, dass die Spalten gleich hoch sind.
Es ist nun auch egal, welche der beiden Spalten nun mehr Höhe benötigt, da sich die umschließende Box mit ihrem Hintergrund anpasst.
Das selbe Prinzip kann man selbstverständlich auch mit einem drei- oder mehrspaltigem, Tabellenlosen Layout anwenden, solange die Boxen eine fest definierte Breite haben.
Schwieriger wird der Spaß, wenn wir versuchen ein in der breite Variables tabellenloses Layout mit gleich hohen Boxen zu realisieren.
Zu dieser, etwas unkonventionellen Lösung kommen wir aber im nächsten Tut.
Hier geht es zum (Link ist nur für Registrierte User sichtbar)
|
|
