nicht angemeldet
Hallo,
Kurz vor dem Wochenende plagt mich noch ein CSS Problem, bei dem ich hoffe, Ihr könnte mir helfen:
Ich habe ein CSS definiert, welches grob aus einem Container und zwei Spalten darin besteht:+---------+
- XXX OOO +
- XXX OOO +
- XXX OOO +
+---------+
Es gibt kein HTML-Element welches einen Container beschreiben kann. Das Element DIV ist ein nicht näher definiertes Blocklevel-Element, kein Container.
<!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 type="text/css">
#container {
width: 400px;
border: 1px solid red;
margin-left: auto;
margin-right: auto;
padding: 10px;
}#sidebar_a {
float: left;
width:180px;
background-color: rgb(235, 200, 200);
}#sidebar_b {
width: 180px;
margin-left: 200px;
background-color: rgb(235, 235, 235);
}</style>
</head>
<body>
<div id="container"><div id="sidebar_a">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div id="sidebar_b">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla</div>
<br style="clear:left;">
</div>
</body>
</html>
Erklärung: Die Eigenschaft float:left löst das Element div.sidebar_a aus dem normalen Textfluss. Normale, im Textfluss befindliche Elemente fließen um dieses Element herum. Deshalb ergibt sich die Höhe des umgebenden DIV-Elements als Gesamthöhe aller normal fließenden Elemente. Mit der Eigenschaft clear:left des BR-Elements (es kann auch ein beliebiges anderes Element sein) zwingt man dieses unter das div.sibebar_a in den normalen Textfluss, wodurch es die Gesamthöhe des umgebenden DIVs beeinflusst.
viele Grüße
Axel