bituniverse.com

[M]

Ich sitzte endlich an der Umstellung auf ein CSS Design

Doch schon tritt ein Problem auf, dass ich alleine nicht gelöst bekomme.

Ich habe ein Grunddesign, das - wenn man so will - aus drei Zeilen besteht.

1. Zeile der Header
2. Zeile nebeneinander Navi, Inhalt, Info
3. Zeile Footer

Damit in der zweiten Zeile die Navigation, der Inhalt und die Infoleiste auch schön nebeneinander sitzen, haben sie alle ein "float: left;" bekommen. Und genau das ist das Problem. Damit fallen sie alle aus dem übergeordneten <div>-Block heraus, den ich drumherum gesetzt habe. Das ist zwar das normale Verhalten, aber führt dazu, dass sich die drei Boxen der zweiten Zeile nicht in ihrer Höhe gegenseitig anpassen. Wenn also der Text im Inhalt mehr Platz nach unten benötigt, als die Navigation, dann kachelt sich z.B. das Hintergrundbilder dieser nicht weit genug durch, sodass Lücken im Design entstehen.

Gibt es eine Möglichkeit, dass sich Elemente trotz "float: left;" in ihrer Höhe dem übergeordneten Element anpassen? Mit einem einfachen "height: 100%;" ist es ja leider nicht getan...

[Simon W.]

kann man nicht einfach das float weglassen und es als display:inline definieren?

[M]

Leider nicht, denn sobald dann die Navigationsbox zuende ist, rücken alle übrigen Elemente der Zeile nach. Eben so, wie es auch Text macht, der um eine Grafik herumfliest, wenn diese zuende ist.

[Günni]

Hi M,

vielleicht hilft dir dieses "Grundgerüst" etwas weiter:

http://de.selfhtml.org/css/layouts/mehrspaltige.htm#kopf_fuss

Gruß
Günni

[M]

So ähnlich habe ich es auch gelöst. Der "Trick" - wenn man es denn so nennen kann - ist die Hintergrundgrafik so anzupassen, dass sie in dem umfassenden div-Block eingesetzt werden kann. Wenn dann die div-Blocks für die Navigation und Infos "durchsichtig" bleiben, hat das visuell den gleichen Effekt.

Danke euch