nicht angemeldet
Hallo,
ich habe ein dreispaltiges Layout mit floats definiert (CSS siehe unten).
In der mittleren Spalte sollen Elemente von Text umflossen werden, deshalb stehen auch hier Element mit float, denen ein Element mit der Eigenschaft clear:both folgt, um das Umfliessen für das nächste Element abzuschalten.
Im IE funktioniert das bestens.
Firefox scheint das clear:both auf die beiden äusseren Spalten anzuwenden, sodass das auf das clear:both Element folgende Element bis zum Ender der beiden äusseren Spalten nach unten verschoben wird.
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>clear</title>
<link rel="stylesheet" type="text/css" href="a1.css">
</head><body>
<div id="container">
<div id="links">
links<br/>links<br/>links<br/>links<br/>links<br/>links<br/>-----<br/>-----<br/>-----<br/>-----<br/>-----<br/>
</div>
<div id="rechts">
rechts<br/>rechts<br/>rechts<br/>-----<br/>-----<br/>-----<br/>-----<br/>-----<br/>-----<br/>-----<br/>-----<br/>-----<br/>-----<br/>-----<br/>-----<br/>-----<br/>-----<br/>-----<br/>
</div>
<div id="mitte">
<div class="p1">
p1<br/>p1<br/>p1<br/>p1<br/>p1<br/>
</div>
<div>
mitte<br/>mitte<br/>mitte<br/>mitte<br/>
</div>
<div class="clear">ggg<div>
<div>
amitte<br/>amitte<br/>amitte<br/>amitte<br/>
</div>
</div>
</div>
</body></html>
CSS:
DIV.clear { clear: both; }
div.p1
{ width:215px;
float:left;
background-color:#D3E2F9;
}
div#container
{
width:938px;
border:solid 1px green;
}
div#links
{
float:left;
width:179px;
border:solid 1px red;
margin-right:20px;
margin-bottom:20px;
}
div#rechts
{
width:215px;
border:solid 1px BLUE;
float:right;
}
div#mitte
{
margin-left:190px;
width:490px;
border:solid 1px red;
}