nicht angemeldet
Hallo,
ich experimentiere gerade mit einem div-Layout.
Die Seite soll aus 4 divs bestehen.
Eines oben (mainmenu), so breit wie nötig, fixe Höhe.
Danach kommen zwei divs nebeneinander, das linke (submenu) hat eine feste Breite, das rechte (content) wird so breit wie nötig.
Diese beiden haben keine fixierte Höhe, die soll sich nach dem Inhalt richten.
Bis hierher ist das auch noch kein Problem.
Jetzt kommt das problematische div (footer).
Es soll über die gesamte Breite gehen, und sich unten an das höhere der beiden nebeneinanderliegenden divs (submenu, content) anlegen.
Das kriege ich aber irgendwie nicht hin.
Das Problem ist, daß ich die top-Position nicht kenne, da die Höhe von submenu und content variabel ist.
Hier mal mein experimenteller Code - ich weiß nur nicht, wie ich das div footer positionieren soll.
Die Hintergrundfarben hab ich nur eingefügt, damit ich erkenne, welches div bis wohin geht, die kommen natürlich auf der fertigen Seite nicht so!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Testseite</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<style type="text/css">
body { margin:0; padding:0; background-color:fuchsia; }
div { padding:0.5ex; }
#mainmenu { position:absolute; left:0; top:0; width:auto; height:20ex; background-color:blue; }
#submenu { position:absolute; left:0; top:0; margin-top:21ex; width:20ex; background-color:silver; }
#content { position:absolute; left:0; top:0; margin-top:21ex; margin-left:20ex; width:auto; background-color:red; }
#footer { /*position:???; top:???; */ left:0; width:100%; text-align:center; background-color:yellow; }
</style>
</head>
<body>
<div id="mainmenu">
Hier die Haupt-Navigation, die ziemlich breit werden kann.
</div>
<div id="submenu">
Submenu
test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br>
</div>
<div id="content">
Inhalt<br>
test test test test test test test test test test test test test test test test test test test
test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br>
</div>
<div id="footer">
Footer...
</div>
</body>
</html>
Ich hab schon ziemlich viel mit float, clear und position rumgespielt, aber scheinbar die richtige Kombination noch nicht erwischt.
Seh ich den Baum vor lauter Wäldern nicht?
Ach ja, sollte zumindest in Mozilla (+Derivate), Opera, Internet Explorer > 5.0 einigermaßen tun...
Mit kleineren Fehlern wie dem Abstand zwischen mainmenu und submenu+content im IE kann ich leben.
Vielen Dank im Voraus,
Andreas