Question

I have following markup:

<div class="twocol float-left">
    <h4>left</h4>
    <p>first</p>
    <p>second</p>
    <p>third</p>
</div>

<div class="twocol">
    <h4>right</h4>
    <p>foo</p>
    <p>bar</p>
    <p>foobar</p>
</div>​

CSS:

.twocol {
    margin-right: 1em;
}

.float-left {
    float: left;
}

h4 {
    margin: 1em 0;
    font-weight: bold;
}

​DEMO

Problem

The headlines’ vertical position should be equal, but “right” is 1 em above “left”. Why? And how to fix this?

Answer 1

The problem here is due to collapsing margins. By default there is some margin on the body. When two margins meet the browser chooses the larger of the two and applies it. When you float the one column this disrupts the collapsing margin and both margins are being applied.

I have added some background colors to your fiddle to illustrate this.
http://jsfiddle.net/Hu5ZH/2/

To learn more about collapsing margins:
http://www.w3.org/TR/CSS2/box.html#collapsing-margins