Layout mit DIV

[Henning]

Hallo,

ich möchte ein Webseitenlayout mit DIV (ohne Tabellen oder Frames) erstellen. Dazu habe ich oben ein DIV mit width:100% und height:100px. Darunter drei DIVs nebeneinander die äußeren jeweils mit float:left bzw. float:right. Das Problem dabei ist: Das linke und rechte div soll soll sich der Länge des mittleren DIVs anpassen und das klappt nicht. height:100% hilft auch nicht, die DIVs erhalten dann nur die Höhe eines Bildschirmes. Hat jemand eine Idee?

Gruss,
Henning

[Orlando]

Hi, Henning

ich möchte ein Webseitenlayout mit DIV (ohne Tabellen oder Frames) erstellen. Dazu habe ich oben ein DIV mit width:100% und height:100px. Darunter drei DIVs nebeneinander die äußeren jeweils mit float:left bzw. float:right.

Ein schönes Beispiel: http://www.thenoodleincident.com/tutorials/box_lesson/basic4.html

Das Problem dabei ist: Das linke und rechte div soll soll sich der Länge des mittleren DIVs anpassen und das klappt nicht. height:100% hilft auch nicht, die DIVs erhalten dann nur die Höhe eines Bildschirmes. Hat jemand eine Idee?

Lege um die drei 'vertikalen' DIVs ein weiteres. Wenn du dann das linke und rechte mit height:100% formatierst, orientieren sie sich am verfügbaren Platz -> des umliegenden DIVs, das sich ja der Länge des mittleren automatisch anpasst.

LG Orlando

[Henning]

Hi,

Ein schönes Beispiel: http://www.thenoodleincident.com/tutorials/box_lesson/basic4.html

genauso sah es bei mir aus

Lege um die drei 'vertikalen' DIVs ein weiteres. Wenn du dann das linke und rechte mit height:100% formatierst, orientieren sie sich am verfügbaren Platz -> des umliegenden DIVs, das sich ja der Länge des mittleren automatisch anpasst.

genau das war die Lösung.

Danke und Gruss,
Henning

[Henning]

Hi,

wie ich gerade feststellen musste, scheint das zwar im IE zu klappen, im Mozilla sieht sieht es aus wie vorher.

Gruss Henning

[Orlando]

Hi nochmal

wie ich gerade feststellen musste, scheint das zwar im IE zu klappen, im Mozilla sieht sieht es aus wie vorher.

Wäre toll, wenn man sich das Problem mal online ansehen könnte ;) Übrigens machen es alle Browser richtig, wenn für das umgebende DIV eine Höhe angegeben wird - was nicht sonderlich praktikabel ist.

LG Orlando

[Henning]

Hi,

Wäre toll, wenn man sich das Problem mal online ansehen könnte ;) Übrigens machen es alle Browser richtig, wenn für das umgebende DIV eine Höhe angegeben wird - was nicht sonderlich praktikabel ist.

es klappt jetzt in IE und Mozilla, jetzt müsste IE nur noch position:fixed können.
http://henning.boesch.bei.t-online.de/test.html
ohne Links und Bilder

Geht das auch in Opera?

Gruss,
Henning

[Orlando]

Hi,

es klappt jetzt in IE und Mozilla, jetzt müsste IE nur noch position:fixed können.

du triffst da einen ziemlich wunden Punkt des Marktführers ;) Leider ist es nicht nur so, dass er es nicht kann, er verschiebt teilweise auch fix positionierte DIVs um einige Pixel. Da hilft es, diese Bereiche zunächst absolut zu positionieren und anschließend unter Verwendung eines Selektors 'ruhigzustellen'. Viele Selektoren versteht er nämlich auch nicht. Mehr dazu in http://forum.de.selfhtml.org/archiv/2002/5/12332/#m68890.

http://henning.boesch.bei.t-online.de/test.html
ohne Links und Bilder

Na bitte. Ich würde evt. noch die ID 'banner' mit einem Hintergrund versehen, damit der Text nicht lesbar unter die Überschrift scrollt.

Geht das auch in Opera?

Natürlich. Bezüglich CSS nehmen sich Opera und Mozilla kaum etwas, beide sind hier hervorragend.

LG Orlando