Fixed for CSS Margin Collapsing

Question

Assuming I have HTML like

<body id="doc"> 

  <div id="container">
    ddd
  </div>

</body>

And my CSS is

#doc {
    margin-top:0;
    width: 480px; 
    height: 320px;
    background-color: red;   
    overflow:auto;
}

#container {
    text-align: center;
    width: 400px;
    background-color: green;
    margin: 10px; 
}

It seems by using the overflow:auto does not help, any idea?

a simple fix would be tu use padding and not margin on your container. — meo, Mar 15 '11 at 10:16
See here: http://stackoverflow.com/questions/5249756/why-are-my-divs-margin-effected-by-content-blocks-inside-of-it/5249872#5249872 - I list many of the techniques to "fix" this. — thirtydot, Mar 15 '11 at 10:18

Jhourlad Estrella · Accepted Answer · 2011-03-16T05:19:52.257

Force the lower level to stretch down to the last element by doing a clear:

<style>
    #doc {
        margin-top:0;
        width: 480px; 
        height: 320px;
        background-color: red;   
        overflow:auto;
    }

    #container {
        text-align: center;
        width: 400px;
        background-color: green;
        margin: 10px; 
    }


    #stretchmyparent {
      clear:both;
    }
    </style>

    <body id="doc"> 
      <div id="container">
        ddd
      </div>

      <div id='stretchmyparent'></div>
    </body>

Fixed for CSS Margin Collapsing

1 Answers1