Why is margin-top not working in this case?
css, html, layout
Solution
That is because of the floated elements. They do not "count into" the height of their container, unless they are cleared.
There are several clearing techniques you can use, for example setting `overflow: hidden` on the container:
.wrapper {
overflow: hidden;
}
jsFiddle Demo
Problem
I'd like to know why my class `.top` does not work for my second DIV `wrapper top`? I would expect to have 200px between the bottom of the picture on the right and the top of the red DIV but it's not working. See JSFIddle HTML ``` <div class="wrapper top"> <div class="block-1"> <p><span>ddfsfsdsfds</p> <p>fdsfsdfs.</p> <p>dfsdfdsfds.</p> </div> <div class="block-2"><img src="images/136147555-e1329752650296-287x300.jpg" alt="136147555-e1329752650296-287x300" width="287" height="300"></div> </div><!-- End wrapper --> <div class="wrapper top"> <div class="block-100pc"> block-100pc </div> </div> ``` CSS ``` body { background: #F2F2F2; } .top { margin-top: 200px; } .wrapper { position: relative; display: block; margin-right: auto; margin-left: auto; width: 980px; } .block-1 { float: left; box-sizing: border-box; padding: 20px; width: 60%; text-align: justify; background-clip: border-box; background: #fff; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } .block-1 span { color: #124191; font-weight: bold; } .block-2 { float: right; overflow: hidden; box-sizing: border-box; width: 35%; padding: 20px; background-clip: border-box; background: #fff; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); text-align: justify; } .block-100pc { overflow: hidden; box-sizing: border-box; width: 100%; padding: 20px; background-clip: border-box; background: #fff; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); text-align: justify; clear: both; background: red; } ```