Ich habe jetzt ein weiteres div in die umschließende Box gepackt, das nur 1px hoch ist und im css das Atribut "clear: left;" besitzt, sowie die gleiche border wie die Navi-Box, damit keine Lücke entsteht.
Jetzt wird es zwar im Firefox vernünftig dargestellt, aber im IE habe ich jetzt eine "Leerzeile" am Ende, wenn der Navigationsbereich kürzer ist als der Contentbereich:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.main {
margin-left: 10%;
margin-top: 5%;
width: 70%;
border: 3px solid #1D107B;
}
.navi {
float: left;
width: 10em;
border-right: 3px solid #1D107B;
}
.contentbox {
margin-left: 10em;
border-left: 3px solid #1D107B;
}
.clearer {
height: 1px;
clear: left;
width: 10em;
border-right: 3px solid #1D107B;
}
</style>
</head>
<body>
<div class="main">
<div class="navi">
<p>test test test test test test test test test test test test test test test test test test</p>
</div>
<div class="contentbox">
<p>test test test test test test test test test test test test test test test test test test</p>
<p>test test test test test test test test test test test test test test test test test test</p>
<p>test test test test test test test test test test test test test test test test test test</p>
<p>test test test test test test test test test test test test test test test test test test</p>
<p>test test test test test test test test test test test test test test test test test test</p>
</div>
<div class="clearer"></div>
</div>
</body>
</html>
Irgendwie ist habe ich das Gefühl, daß das keine saubere Lösung, sondern eher geproscht ist. Kann mir dazu vielleicht jemand einen Tip geben?
LG, alzani!