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 +
+---------+
Nun hab ich nicht so den Durchblick mit CSS, habe die linke Spalte über "float:left" definiert, damit sie auf gleicher Höhe mit der rechten Spalte erscheint. Das Problem: Wenn ich die rechte Spalte mit Text fülle (ohne "float", dann erweitert sich der ContainerRahmen entsprechend, bei der linken mit "float" geht die Spalte über den Rahmen hinaus. Eine Beispieldatei zum nachvollziehen habe ich beigefügt.
Was mache ich falsch, wie löse ich's? Für jede Hilfe wäre ich dankbar!
Gruss und Kuss,
Antje
------------------------
<!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>
</div>
</body>
</html>