nicht angemeldet
Hallo,
ich möchte links mehrere Div-Boxen mit gleicher, fixer Breite hinsetzen und rechts daneben soll eine Div-Box sein, die den übrigen horizontalen Platz verbraucht.
Die Boxen links (in meinem Beispiel 2, können auch mehr sein) habe ich in einen übergeordneten Div-Container gesetzt, so wie auch die Box rechts.
Im Beispiel hat der rechte übergeordnete Container einen roten Rand. Wenn man diesen entfernt (z.B. 1px auf 0px), tritt das Problem auf:
Die BOX1 hat den doppelten Abstand nach oben. Aus 10 Pixel werden 20 Pixel.
BOX1 und Box-rechts sind damit nicht mehr auf gleicher Höhe.
Wenn man den margin-Wert (.box) auf 5 Pixel setzt, ist sie 10 Pixel entfernt (während die rechte Box tatsächlich 5 Pixel entfernt ist).
Scheinbar wird margin-top für den Inhalt von divleft verdoppelt, wenn divright keinen border hat.
Die Tatsache, dass das im IE6 nicht passiert, sagt mir, dass ich etwas falsch machen muss.
Kann mich jemand bitte aufklären?
Hier das Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>TEST</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="0">
<style type="text/css">
* { margin:0px; padding:0px; }
#divleft { float:left; width:200px; border:0px solid red; } /* linker Container */
#divright { margin-left:200px; border:1px solid red; } /* rechter Container */
.box { border-style:solid; border-color:gray; border-width:1px; margin:10px; padding:5px; } /* Dieser margin-Wert scheint verdoppelt zu werden */
.boxtitle { background-color:gray; color:white; font-weight:bold; margin:0px; padding:5px; }
</style>
</head>
<body>
<div id="divleft">
<div class="box boxleft">
<p class="boxtitle">BOX1</p>
---<br>
</div>
<div class="box boxleft">
<p class="boxtitle">BOX2</p>
---<br>
</div>
</div>
<div id="divright">
<div class="box boxright">
<p class="boxtitle">Box-rechts</p>
TESTMAIN!
<br>
</div>
</div>
</body>
</html>