nicht angemeldet
Innerer clear "cleart" äußeren float
Der MartinFolgender Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#container {
width:400px;
border:black solid 1px;
}
#left_side_bar {
float:left;
width:100px;
border:#333 solid 1px;
background-color:#CCC;
min-height:900px;
}
#content {
background-color:#CCC;
margin-left:100px;
}
#left_sided_lis {
border:blue solid 2px;
}
#left_sided_lis li {
display:inline;
}
#left_sided_lis li div {
float:left;
width:150px;
height:200px;
border:#333 solid 1px;
background-color:#999;
}
#footer {
background-color:#666;
height:30px;
}
.clear {
clear:both;
}
</style>
</head>
<body>
<div id="container">
<div id="left_side_bar"><span>Sidebar</span></div>
<div id="content">
<span>Inhalt vor der Liste</span>
<ul id="left_sided_lis">
<li><div>Some Content</div></li>
<!-- Some more <li><div>Some Content</div></li>s -->
<li><br class="clear" /></li>
</ul>
<span>Inhalt nach der Liste</span>
<div class="clear"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
Das 2 Spalten-Layout enthält eine Liste mit gefloateten Elementen. Am Ende wird die Liste "gecleart" um den nachfolgenden Inhalt darunter weiter zu führen.
Wenn die #left_side_bar aber länger als der #content ist, so wird der Inhalt nach der Liste unterhalb von #left_side_bar ausgegeben.
Welche Möglichkeiten gibt es, dass sich der clear in der Liste nicht auf den Float von der left_side_bar bezieht.
Die Höhe der Liste ul soll sich ihrem Inhalt anpassen und nicht der left_side_bar
Gruß Sören
-
Hi,
Welche Möglichkeiten gibt es, dass sich der clear in der Liste nicht auf den Float von der left_side_bar bezieht.
http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout
MfG ChrisB
--
“Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]-
Hallo,
Vielen Dank!
Leider war die Webseite nicht mehr verfügbar. Wie gut, dass es Google Cache gibt!
Unter der Überschrift "float-Umgebungen verschachteln" habe ich gefunden was ich suchte.
Der Trick war overflow:hidden auf die Liste anzuwenden. Dadurch wird das Element als eigener Bereich anerkannt.Gruß Sören
-
Hi,
Leider war die Webseite nicht mehr verfügbar.
in der Tat, de.selfhtml.org scheint komplett down zu sein. Das dürfte eigentlich nicht sein. Ich habe mal die Admins informiert, wahrscheinlich eine technische Panne (oder dringende Wartungsarbeiten).
Ciao,
Martin--
TEAM: Toll, Ein Anderer Macht's.
-
-