Question

I have two <div> inside of a container. They act as a left and right column. The right column will vary in height, while the left column is just one image and some text.

How can I position these correctly without using float and clearing div hacks? Use of these styles means I will need extra HTML and usually excessive CSS.

jsFiddle where the columns do not behave nicely at all. They should both start at the top of the container div.

I assume that you could do this with display: inline-block. But when I do this one of the columns usually has strange vertical positioning.

Answer 1

You could still use float without any hacks and your HTML-markup like this:

CSS

.container {
    /* this clears the float */
    overflow: hidden;
}

.leftColumn {
    float:left;
}

.rightColumn {
    float:left;
}

I only posted the parts that have changed.

Demo: http://jsfiddle.net/NhS98/