nicht angemeldet
3-spaltiges, dynamisches Div-Layout
Hallo Leute,
und zwar habe ich das Problem, dass ich gerne ein 3-spaltiges Div-Layout aufbauen möchte, wo es oben einen Header gibt, darunter 3 nebeneinander liegende Divs (Menü links, Content, Menü rechts) und darunter einen Footer.
Das ganze habe ich wie folgt aufgebaut:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
.left{
border:1px solid orange;
text-align:center;
width:200px;
height:100%;
float:left;
}
.right{
border:1px solid red;
text-align:center;
width:200px;
height:100%;
float:right;
}
.middle{
border:1px solid blue;
text-align:center;
float:left;
width:550px;
height:100%;
}
.clear{ clear:both; }
</style>
</head>
<body>
<div id="rootDiv" style="width:990px;">
<div id="header" style="border:1px solid brown; text-align:center; width:100%;">Bild</div>
<div id="inhalt" style="height:200px;">
<div class="left">Links</div>
<div class="middle">Mitte</div>
<div class="right">Rechts</div>
<div class="clear"></div>
</div>
<div id="footer" style="border:1px solid grey; text-align:center; width:100%;">Footer</div>
</div>
</body>
</html>
Aber das funktioniert irgendwie nicht richtig. :(
1.) Wie bekomme ich das mittlere Div dazu, dass es sich an die Breite bis zum rechten Menü anpasst ?
2.) Wie kann ich es bewerkstelligen, dass sich die 3 inneren Divs immer gegenseitig an die Höhe anpassen ? Also wenn im mittleren Div viel Text steht, dann sollen sich die beiden Menüs auch an dessen Höhe orientieren und umgekehrt natürlich auch, wobei diese 3 inneren Divs auch eine Mindesthöhe besitzen sollten. Darüber hinaus soll dann die Länge des längsten Textes entscheiden wie hoch die drei Divs zu sein haben. Geht sowas ?
Vielen Dank für eure Hilfe.
-
hi,
1.) Wie bekomme ich das mittlere Div dazu, dass es sich an die Breite bis zum rechten Menü anpasst ?
Verwende einfach bei .middle keine width; dies ist seit CSS 2.1 erlaubt. der einzige Harken: Falls der Text nicht mindestens einmal bis zu right läuft, gehört der Platz vom Textende bis zum .right nicht mehr zum DIV, da sich die breitenlosen Floatelemente dem Textinhalt anpassen. Mehr findest du hier: http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout#layouttabelle
Seit CSS 2.1 ist es auch erlaubt, float-Elementen keine Breite zuzuweisen2.) Wie kann ich es bewerkstelligen, dass sich die 3 inneren Divs immer gegenseitig an die Höhe anpassen ? [...]?
http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout#float-einschliessen
Hier noch ein netter Artikel:
http://www.css-technik.de/css-examples/219_9/
Achtung: Hier wird aber das Weglassen von Breitenangaben verboten. Dies hat den einfachen Grund, dass hier anscheinend noch nach CSS 2.0 geschrieben wurde.lg JeSchnell
PS: Warum verwendest du hier Klassen für .middle ect. und keine IDs?