nicht angemeldet
Hallo dey,
danke für dein Beispiel, es ist ja im prinzip ähnlich wie mein Ansatz, nach beiden Boxen ein Element einzusetzen, das das float wieder aufhebt.
Ich habe es auch eingesetzt und es löst beide Probleme, die ich hatte:
<!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;
}
.clearfix {display: inline-table;}
.clearfix:after {
content: " ";
display: block;
height: 0;
clear: left;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
</style>
</head>
<body>
<div id="main" class="clearfix">
<div class="navi">
<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="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>
</body>
</html>
Ist das denn eine saubere Lösung? Sicher wesentlich besser, als ein Hintergrundbild einzusetzen, aber durch "display: inline-table;" simuliert man doch eine Tabelle, ist das dennoch dem Tabellenlayout vorzuziehen? Wie gesagt, es ist mein erstes css-Layout und ":after" kannte ich z.B. nicht.