div container nehmen margin nicht

JoLe05 · 15.06.2012

hey leute! immer wieder stoße ich auf folgendes problem bei meinen tryouts Websites zu bauen... Ich habe z.b 2 divs (1x links gefloatet und 1x rechts gefloatet) diese bilden den header... der nächste div sollte dann einen margin-top von 30px haben jedoch klebt dieser div an den beiden anderen! wie genau kann man dieses problem lösen... ich poste euch hier mal den entsprechenden code und danke euch schonmal für die hilfe...

PHP:

<body>
<div id="wrapper">
<div id="social"></div>
<div id="logo"></div>
    <div id="topnavi"><jdoc:include type="modules" name="topnavi" /></div>
    <div id="slider"><jdoc:include type="modules" name="slider" /></div>
    <div id="breadcrumbs"><jdoc:include type="modules" name="breadcrumbs" /></div>
    <div id="content">
        <div id="navi_left"><jdoc:include type="modules" name="navi_left" /></div>
        <div id="contentaaa"><jdoc:include type="component" /></div>
    </div>
    <div id="links"><jdoc:include type="modules" name="links" /></div>
    <div id="footer"><jdoc:include type="modules" name="footer" /></div>
</div>
</body>

und das css

Code:

*{
    margin: 0;
    padding: 0;    
}

a {
    text-decoration: none;    
    
}
body{
    background: url(../images/hg-body.jpg);
}

#wrapper{
    width: 960px;
    margin: 0px auto;
    height: 1500px;
}

#social{
    margin-top: 10px;
    width: 960px;
    height: 50px;
}

#logo{
    float: left;
    width: 190px;
    height: 100px;
    background: #FFF;
    margin-top: 10px;
    margin-right: 10px;
}
    
#topnavi{
    float: right;
    width: 760px;
    height: 100px;
    margin-top: 10px;
    background: #FFF;
}

#topnavi ul{
    margin-top:10px;
    margin-left: 20px;    
}

#topnavi li{
    float: left;
    list-style: none;
    
}

#topnavi li a {
    display: block;    
    line-height: 80px;
    font-family: 'Fredericka the Great', cursive;
    font-size: 24px;
    color: #333;
    border: 1px dotted #999;
    text-align: center;
    padding-left: 20px;
    padding-right: 20px;
}


#slider{
    clear: both;
    width: 960px;
    height: 200px;    
    background: #009;
    margin-top: 20px;
}

#breadcrumps{
    
}

#content{
     width: 960px;
    height: 200px;    
    background: #009;
    margin-top: 20px;
}

#links{
    
}

#footer{
    
}

Jonnsn · 15.06.2012

AW: div container nehmen margin nicht

Hi,

Du solltest nach den beiden floatenden Elementen ein clear einbauen:

Gruß

JoLe05 · 15.06.2012

ich habe den slider mit clear: both; doch gecleared und das sollte dann auch funktionieren.... jedoch klebt der container jetzt an div head und logo, der margin wird also nicht genommen

um es vll besser verständlich zu machen... ich möchte dass der div slider einen margin-top: 20px; von den beiden divs oberhalb hat und nicht das das margin-top vom seitenrand ausgeht...

Doppelposting zusammengetackert. Verwende den »Bearbeiten«-Button, wenn du etwas ergänzen möchtest.

Wex

Jonnsn · 15.06.2012

AW: div container nehmen margin nicht

Das war vielleicht nicht ganz deutlich: Das Margin wird beim clearenden Element nicht funktionieren, höchstens du rechnest die Höhe des höchsten floatenden Elements mit ein. Das clearende Element sitzt immer direkt unter dem höchsten floatenden Element. Du müsstest also erst clearen und dann dein Element mit margin-top einbauen.

HTML:

<div id="topnavi"><jdoc:include type="modules" name="topnavi" /></div>
<div style="clear:both"></div>
<div id="slider"><jdoc:include type="modules" name="slider" /></div>

JoLe05 · 15.06.2012

AW: div container nehmen margin nicht

ich habs jetzt genau so gemacht und siehe da es funktioniert.... vielen dank aber ich versteh noch immer nicht ganz warum....

reimundas · 15.06.2012

AW: div container nehmen margin nicht

ganz sauber ist es, wenn du deine beiden float divs, links und rechts, in einen wrapper , sprich ein weiteres div packst. In diesem wrapper kommen dann drei divs, links rechts und ein clear div. Dann sollte es auch browser übergreifend keine Probleme geben.

Und zum Verständnis:
Wie soll der div slider auch ein margin-top annehmen, wenn die beiden vor ihm liegenden divs aus gar nicht mehr "real" sind, sondern fließen.

s4f · 16.06.2012

AW: div container nehmen margin nicht

reimundas schrieb:
ganz sauber ist es, wenn du deine beiden float divs, links und rechts, in einen wrapper , sprich ein weiteres div packst. In diesem wrapper kommen dann drei divs, links rechts und ein clear div. Dann sollte es auch browser übergreifend keine Probleme geben.
.

wenn du links+rechst in ein div packst, dann brauchst du nicht unbedingt ein clear (schöner?ja!).
das nachfolgende div (mit dem margin-top) kriegt kein float, weil dein wrap nicht gefoatet wurde (nur die kinder vom wrap erben es).

und es muss nicht immer ein div zum clear missbraucht werden,
hr tut's auch,
aber das ist ein altes thema;-)

Myhar · 18.06.2012

AW: div container nehmen margin nicht

Zu viele divs sind aber auch nicht wirklich sauber. Und das clear-div kann man sich in 99% der Fälle sparen, es reicht meistens auch aus, dem umschließenden div ein overflow:auto zu geben.
Clearen an sich ist jedoch nie verkehrt, die leeren clear-divs sind oft unnötig.