Zitat:
|
Zitat von ulle
Wer eine Clear-Class sucht die bisher keine weiteren Nebenwirkungen aufgezeigt hat, dem sei mit nachfolgendem CODE geholfen.
|
Wenn man einen solchen Container mit einer clear-class neben einen langen Float stellt, so ist die Wirkung, dass sich der Container bis zur Länge des seitlichen Floats (sidebar) streckt, und nicht bloß den inneren float umschließt.
Per :after klebt der clear am Gesäß des Containers und cleart nun mal jedes vorhergehende float von der Unterkante des Containers aus.
http://www.satzansatz.de/xforum/clearfixproblem.html
Aber eigentlich wollte man doch bloß den inneren float umschließen, und sich nicht auf die Länge der Umgebung beziehen.
Vegleicht man nun IE6 mit Fx, Opera&Co, so ist das auch keine gute Simulation des Verhaltens vom IE6.
Jeder Lösungsansatz hat seine Schwächen, wenn es darum geht, etwas so aussehen zu lassen, wie IE es tut.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style type="text/css">
.containing-float:after
{
...
}
.containing-float
{
...
}
p {background: blue; float: left; height:50px; }
.sidebar {
float: left; width:150px; height:500px; background: yellow;
}
.containing-float {background: gray; border:1px solid fuchsia;}
</style>
</head>
<body>
<div class="sidebar">sidebar</div>
<div class="containing-float">containing float
contained float</p>
</div>
</body>
</html>