Layout-Problem

[pascaluhlmann]

Hallo!

Ich bin momentan dabei, ein Website-Layout zu erstellen. Dabei habe ich momentan folgenden Aufbau:



1) Der Inhaltsbereich ist in zwei Zeilen für Headline und Inhalt unterteilt.
2) Der Inhaltsbereich setzt sich aus zwei nebeneinander stehenden DIV-Elementen (Navigation + Content) zusammen. Diese Anordnung erreiche ich momentan durch Zuweisen der Eigentschaft float für jedes der beiden DIVs.

Mein Problem ist nun aber, dass ich diesen beiden DIV-Elementen keine feste Höhe mehr zuweisen will, damit die Höhe der Anzeige im Browser maximal ausgenutzt wird. Also habe ich den beiden für die Höhe den Wert "100%" zugewiesen. Dies funktioniert natürlich nicht, da sich die Höhe nicht mehr auf die Höhe des Elternelements bezieht. Somit wurden die beiden DIV-Elemente so hoch wie die maximale Anzeige-Höhe des Browserfensters wodurch wiederum gescrollt werden muss.
Hat jemand eine Idee, wie ich das ganze trotzdem so realisieren kann, ohne eine feste Höhe angeben zu müssen?


MfG
Pascal

[Kropff]

arbeitest du mit farbigen hintergründen? sollen navigation und content dann die selbe höhe haben?

gruß
peter

[pascaluhlmann]

Ja, ich arbeite mit Hintergrundfarben und ja, Navigation und Content sollen gleich hoch sein.

[Kropff]

muss ich mal zu hause in meiner sammlung nachsehen. irgendwann habe ich das mal gemacht. melde mich, wenn ich was gefunden habe. das ist nicht so einfach.

gruß
peter

[pascaluhlmann]

OK, danke schon mal!

[Kropff]

so, habe mir das mal angeschaut. allerdings war das ein ziemlicher pfusch, der nur mit festen(!) breiten funktioniert. lege um die navigation und den content ein div-element, dass die entsprechenden farben als z.b. 800px breites und 1px hohes hintergrundbild hat, das vertikal gekachelt wird.

um das float des contents aufzuheben, brauchst du noch ein leeres div mit der eigenschaft clear:left innerhalb des umschließenden div-elements. den kannst du dann auch als unteren abstandshalter mit entsprechenden hintergrundfarbe nehmen.

gruß
peter