Parameter for #slider : http://jsfiddle.net/NPBrq/2/

  #header { width: 100%; } #header-holder { background-color: #ccc; margin: 35px auto 20px auto; width: 950px; } #slider { background-color: red; clear: both; height: 335px; margin-top: 20px; width: 100%; } #slider-holder { margin: 0px auto; width: 950px; } 
  <html> <body> <div id="header"> <div id="header-holder"> <div id="logo"></div> <div id="menu"></div> </div> </div> <div id="slider"> <div id="slider-holder"> LOREM </div> </div> </body> </html>

  • It works for me (Linux - Opera) - atnartur
  • The link did not give that. sorry corrected - chelovechki

3 answers 3

Read about CSS collapse .

Plus, this will help you stump:

 #header-holder{ width:950px; margin: 35px auto 20px auto; background-color:#cccccc; overflow: hidden;/*Фенька*/ }

Answering the question directly: The leader collapses. Just because he "does not feel" the float elements inside. Confirmation - the lack of a gray background for the header (#ccc) in your example. The crutch for the solution is to do overflow-hidden. Then it will automatically inflate, if you do not specify the height.

Because of the collapse of the hider, an element that has clear: both "thinks" that it is already far enough from the hider to include margin. This effect is called the collapse of indents (try to put two elements vertically with different margins. The one who has more margins wins, the smaller one just collapses into it.)

 #div1{ margin-bottom: 20px; } #div2{ margin-top: 10px; }

will look like there is only 20 px between them.

  • I will read at your leisure, but can you now in 2 words, so as not to sit still for a long time? - chelovechki
  • can. But not in two. = ((This is a complex and buggy thing. - knes
  • thanks for the complete answer! - chelovechki

Put float:left and it all worked:

 #slider{ width:100%; margin-top:20px; clear:both; float:left; }

    I beg your pardon, but why didn’t they give the simplest answer: to reset the flow around immediately after the flow of the blocks ended? jsfiddle

    Add to CSS:

     .clearer { clear: both; }

    And right after the logo and menu:

     <div id="header-holder"> <div id="logo"></div> <div id="menu"></div> <br class="clearer"> </div>

    Generally all :)

    If you don’t have an extra tag that really doesn’t belong there, then pay attention to such a thing - clearfix .

    jsfiddle

    Instead of clearer, we are working on this clearfix :

     .clearfix:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; overflow:hidden; } .clearfix { display: block; } .clearfix { //display: inline-block; } * html .clearfix { height: 1%; }

    And then your HTML will remain the way you originally wanted it:

     <div id="header-holder" class="clearfix"> <div id="logo"></div> <div id="menu"></div> </div>