div beginnt erst an der Stelle, an der der erste inhalt steht.
0 
Beat
0 0
div beginnt erst an der Stelle, an der der erste inhalt steht.
Hallo. Ich habe ein Problem.
Und zwar möchte ich für eine Seite ein eigentlich einfaches Gerüst bauen.
Dabei bin ich auf etwas gestoßen was ich nicht nachvollziehen kann, jedoch von IE8 sowie Firefox 3.5 gleich gerendert wird(andere konnte ich nicht testen).
Das Gerüst besteht aus dem menucontainer, der Platz für ein Menü am oberen Rand bietet. Darunter soll der contentcontainer, der später eine Hintergrundgrafik halten soll. Innerhalb dessen ist der centercontainer der den eigentlichen Inhalt zentriert.
Minimalbeispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
#menucontainer{width:100%; min-width:1024px; height:30px; background-color:#f00;}
#contentcontainer{width:100%; min-width:1024px; background-color:#0f0;margin:0; height:100px;}
#centercontainer{width:1000; margin-top:50px; margin-right:auto; margin-left:auto;}
</style>
</head>
<body>
<div id="menucontainer">
Menu
</div>
<div id="contentcontainer">
<div id="centercontainer">
<div>Test</div>
</div>
</div>
</body>
</html>
Nun wird jedoch der contentcontainer erst ab der Stelle des inneren Test-Divs angezeigt (Also 50px unter dem menucontainer). Eigentlich sollte doch der contentcontainer unabhängig von seinem Inhalt direkt unter dem menucontainer starten, oder täusche ich mich da?
Das seltsame ist: Sobald ich dem contentcontainer einen border gebe oder einen Text ohne div hineinschreibe, fängt er an der richtigen Stelle an.
Wo liegt hier das Problem und wie kann ich es verhindern?
Vielen Dank,
Simon
-
#centercontainer{width:1000; margin-top:50px; margin-right:auto; margin-left:auto;}
^^
Wo liegt hier das Problem
Works as designed, Stichwort collapsing margins.
und wie kann ich es verhindern?
Verwende padding.
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische -
Ein kleiner Tippfehler, der aber nichts am Problem ändert: Beim centercontainer width fehlt das 'px'
Noch was:
Am besten sieht man das Problem wenn man beim contentcontainer im css noch 'border:0px solid black;' hinzufügt, und dann zwischen 0 und 1 px Rand umschaltet. -
Hi,
Nun wird jedoch der contentcontainer erst ab der Stelle des inneren Test-Divs angezeigt (Also 50px unter dem menucontainer). Eigentlich sollte doch der contentcontainer unabhängig von seinem Inhalt direkt unter dem menucontainer starten, oder täusche ich mich da?
Das seltsame ist: Sobald ich dem contentcontainer einen border gebe oder einen Text ohne div hineinschreibe, fängt er an der richtigen Stelle an.
Wo liegt hier das Problem und wie kann ich es verhindern?http://www.w3.org/TR/CSS21/box.html#collapsing-margins:
"The top margin of an in-flow block-level element is adjoining to its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance."MfG ChrisB
--
“Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]