nicht angemeldet
Linkes Div hat doppelten margin-top wenn rechtes Div ohne Rand
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>
-
Hi,
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.Scheinbar wird margin-top für den Inhalt von divleft verdoppelt, wenn divright keinen border hat.
Das dürfte mit adjoining margins zusammenhängen.
<div id="divright"> <div class="box boxright">Wenn du der zweiten Box ihr margin nimmst, dann tritt der Effekt nicht mehr auf.
Wenn sie margin-top hat - dann wird dieses zum margin-top der äußeren Box hinzugenommen, sofern diese keinen Rahmen hat (oder eine der anderen genannten Eigenschaften, die den Effekt unterbinden).
Dass sich das auf die linke obere Box auswirkt, hängt dann vermutlich schlicht mit der Ausrichtung in der „Zeile“ zusammen.
Die Tatsache, dass das im IE6 nicht passiert, sagt mir, dass ich etwas falsch machen muss.
Nein, die sagt dir nur, dass der IE 6 CSS 2.1 nur hundsmiserabel umgesetzt hat.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Scheinbar wird margin-top für den Inhalt von divleft verdoppelt, wenn divright keinen border hat.
Das dürfte mit adjoining margins zusammenhängen.
Collapsing margins verstehe ich eher so, dass vertikal angrenzende Objekte mit einem margin-top beim oberen Element und einem margin-bottom beim unteren Element nicht die Summe dieser beiden margins als Abstand haben, sondern den größten Wert.
Siehe hier.<div id="divright">
<div class="box boxright">
> Wenn du der zweiten Box ihr margin nimmst, dann tritt der Effekt nicht mehr auf. Das wäre nach meiner ursprünglichen "Erklärung" dann 2 x 0 Pixel = 0 Pixel... Diese "Box-rechts" hat ja deshalb einen margin, weil sie nicht direkt an den Fensterrand anstoßen soll. Sonst müsste ich doch den Containerboxen (divleft, divright) ein padding von 10 Pixel und der rechten ein padding-left von 20 Pixel geben... Geht das nicht schöner bzw. direkter? > Wenn sie margin-top hat - dann wird dieses zum margin-top der äußeren Box hinzugenommen, sofern diese keinen Rahmen hat (oder eine der anderen genannten Eigenschaften, die den Effekt unterbinden). \*Collapsing\* margins verstehe ich bisher so, dass von zwei Rändern der größere als Abstand verwendet wird und der kleinere ignoriert wird (siehe Link oben - 40 Pixel statt 60 Pixel). Es sollte doch also irgendwo etwas weniger werden und nicht hinzukommen! Weiterhin hat die äußere Box ja überhaupt keinen margin-top (0), zu dem etwas addiert oder von dem etwas subtrahiert werden könnte! Sowohl die linke, als auch die rechte. > Dass sich das auf die linke obere Box auswirkt, hängt dann vermutlich schlicht mit der Ausrichtung in der „Zeile“ zusammen. Was meinst du damit - welche Zeile? Die "BOX1" ist im linken Container, die "Box-rechts" im rechten, es sind also eher verschiedene Zeilen. Außerdem ist immerhin der linke Container gefloatet. "# Vertical margins between a floated box and any other box do not collapse (not even between a float and its in-flow children)."-
Hi,
Das dürfte mit adjoining margins zusammenhängen.
Collapsing margins verstehe ich eher so [...]
Wenn ich collapsing gemeint hätte, hätte ich nicht adjoining geschrieben.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right? -
Om nah hoo pez nyeetz, c--!
Collapsing margins verstehe ich eher so, dass vertikal angrenzende Objekte
horizontal ist wie der Horizont also so: -------
Varianten das sich horizontale margins (also -top oder -bottom) stören können, findest du mit Beispielen im Wiki Punkt 2.3.1 bzw. 2.3.2.
Matthias
--
-
-