nicht angemeldet
dreispaltiges layout rendert in FF und ID unterschiedlich
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;
}
-
Hallo micho!
Im IE funktioniert das bestens.
fälschlicherweise
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.
So sieht der Standard das vor.
Schau' dir mal den Artikel im SELFHTML Weblog an.Das Stichwort heißt: "Block Formatting Context"
Gruß Gunther
-
So sieht der Standard das vor.
Schau' dir mal [link:http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout@title=denich habe das "mitte" Element mit einem
overflow:hide;
versehen um für #mitte einen eigenen "Block formatting context" zu haben.
Trotzdem orientiert sich das clear immernoch an den contain links und rechts.div#mitte
{ margin-left:190px;
width:490px;
border:solid 1px yellow;
overflow:hide;
/*float:left; */
}-
Hallo!
So sieht der Standard das vor.
Schau' dir mal [denich habe das "mitte" Element mit einem
overflow:hide;
versehen um für #mitte einen eigenen "Block formatting context" zu haben.
Trotzdem orientiert sich das clear immernoch an den contain links und rechts.div#mitte
{ margin-left:190px;
width:490px;
border:solid 1px yellow;
overflow:hide;
/*float:left; */
}Vielleicht versuchst du es mal mit einem gültigen Eigenschaftswert wie "hidden"!
Und wie immer hilft auch ein Blick in SELFHTML! In diesem speziellen Fall bspw. in [link:http://de.selfhtml.org/css/eigenschaften/positionierung.htm#overflow@title=overflow](http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout)!
Gruß Gunther
-
Vielleicht versuchst du es mal mit einem gültigen Eigenschaftswert wie "hidden"!
Danke! wer richtig tippen kann ist klar im Vorteil :-O
-
-
-