Hi, könnt Ihr mir vielleicht helfen?
ich verzweifle grad an einem CSS-Rätsel und kanns nicht lösen :uhm:
ich hab ein 2Spalten-Layout, in der linken 2 Boxen untereinander, in der rechten mehrere DIVs
wenn ich den Boxen in der linken Spalte Höhenwerte (height: ..px) gebe, sitzt der 2. DIV-Kasten in der rechten Spalte bündig mit der Unterkante der 2 Box links
wieso?
Screenshot
HTML
CSS
ich verzweifle grad an einem CSS-Rätsel und kanns nicht lösen :uhm:
ich hab ein 2Spalten-Layout, in der linken 2 Boxen untereinander, in der rechten mehrere DIVs
wenn ich den Boxen in der linken Spalte Höhenwerte (height: ..px) gebe, sitzt der 2. DIV-Kasten in der rechten Spalte bündig mit der Unterkante der 2 Box links
wieso?
Screenshot
HTML
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" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<link href="css_test.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="content">
<div id="cont_left">
<div class="shoutbox" id="box_top">
<p>obere Box</p>
</div>
<div class="shoutbox" id="box_down">
<p>untere Box</p>
</div>
</div>
<div id="cont_right">
<div class="fotocontainer2">
<div class="foto"><img src="testbild.png" alt=""/></div>
<div class="person2"><h2>Name</h2></div>
<div class="ie_clearing"> </div>
</div>
<div class="fotocontainer2">
<div class="foto"><img src="testbild.png" alt=""/></div>
<div class="person2"><h2>Name</h2></div>
<div class="ie_clearing"> </div>
</div>
<div class="fotocontainer2">
<div class="foto"><img src="testbild.png" alt=""/></div>
<div class="person2"><h2>Name</h2></div>
<div class="ie_clearing"> </div>
</div>
</div>
<div class="ie_clearing"> </div>
</div>
</body>
</html>
Code:
* { padding: 0; margin: 0; }
.ie_clearing {clear: both;}
#content {position: relative; }
#cont_left { float: left; width: 200px; }
#cont_right { margin-left: 237px; position: relative; }
.shoutbox { width: 170px; }
#box_top {height: 140px; }
#box_down {height: 160px; }
.foto {float: left; width: 200px;}
.person2 {margin-left: 200px; }