nicht angemeldet
Folgender 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
Der Martin