Css: Clean Solution to the Margin Collapse Issue When Floating an Element

margin-top not working with clear: both

You could put the two floated divs into another one that's got "overflow: hidden" set:

<div style='overflow:hidden'>  <div style="float: left;">Left</div>  <div style="float: right;">Right</div></div><div style="clear: both; margin-top: 200px;">Main Data</div>

Margin collapse between IMG and H2 element not working

Margin only collapses between blocks:

Two margins are adjoining if and only if:

both belong to in-flow block-level boxes that participate in the same block formatting context

[...]

But images are inline-level by default. Blockify it:

img, h2 {  display: block;  margin: 2em 0;}

<section id="test">  <img src="/favicon.ico"/>  <h2>Test</h2></section>

Why top margins are collapsing but bottom margins are not?

Using "clearfix" with display: table will keep the bottom margin, display: block will not.

Src: http://cssmojo.com/the-very-latest-clearfix-reloaded/

Update: Why the top margin collapse is because of no BFC is estabished on its immediate parent

To make the margins not collapse, add a BFC, in this case on the p parent, like in below sample, by adding for example overflow: auto.

More to read: Mastering margin collapsing

Update: Why doesn't a <table>'s margin collapse with an adjacent <p>

.left-column,.right-column {  background-color: orange;  width: 150px;}.left-column {  float: left;}.right-column {  float: right;}.clearfix-using_display-table,.clearfix-using_display-block {  background-color: yellow;  width: 125px;  overflow: auto;                      /*  establish BFC  */}.clearfix-using_display-table p,.clearfix-using_display-block p {  background-color: silver;  width: 100px;}.clearfix-using_display-table:after,.clearfix-using_display-block:after {  content: " ";  clear: both;}.clearfix-using_display-table:after {  display: table;}.clearfix-using_display-block:after {  display: block;}

<div class="wrapper">  <div class="left-column">    <h3>Table</h3>    <div class="clearfix-using_display-table">      <p>Lorem Ipsum...</p>      <p>Lorem Ipsum...</p>    </div>  </div>  <div class="right-column">    <h3>Block</h3>    <div class="clearfix-using_display-block">      <p>Lorem Ipsum...</p>      <p>Lorem Ipsum...</p>    </div>  </div></div>

floating that breaks automatically

Depending on your requirements..you can use absolute positioning:

Demo Fiddle

<ul>
    <li style="top: 1em; height: 4em; background: brown;left:1em;">1</li>
    <li style="top: 2em; height: 2em; background: red;left:2em;">2</li>
    <li style="top: 3em; height: 3em; background: green;left:3em;">3</li>
    <li style="top: 5em; height: 1em; background: blue;left:1em;">4</li>
</ul>

nb. although -take your styles out of being inline!

The above fiddle uses nth-child, which you can use to perform rudimentary pattern matching if these elements follow some sort of predictable ordering.

Or you can use CSS columns depending on your requirements...if the elements appear in dedicated vertical 'lanes'

Note that without using one of the above, you will need to resort to either your own JS for layout management or a pre-existing library like masonry or isotope as vanilla CSS and HTML does not allow for vertically nested row ordering of elements.

Why do I need a border for these divs to render correctly?

Simply put, your margins have collapsed. MDN has a explanation of the phenomenon:

If there is no border, padding, inline content, or clearance to separate the margin-top of a block with the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block with the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.

Source: https://developer.mozilla.org/en-US/docs/CSS/margin_collapsing