Question

I have two rows of 3 boxes, boxes, include image, heading and text. The second row doesn’t align. I have set up a JS Fiddle for this to show you my problem:

http://jsfiddle.net/2QJhN/

What is the issue? What have I missed out/done wrong or both?

Answer 1

Floats can be strange when you put them in multiple rows. One solution is to add a hidden div after each column to sort them out. The usual convention is to give it the class name “clear”, with this CSS:

.clear
{
    clear: both;
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    width: 0;
}

http://jsfiddle.net/2QJhN/3/

EDIT: Please note there are lots of different ways to solve this issue, you can wrap each row in a DIV with some other CSS, which some people prefer and may consider neater. In your case it’s still an extra DIV though.

You’d give it the classname “clearfix”:

.clearfix:after, .windowContent:after, .pane:after          
{
    clear: both;
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;

}

* html .clearfix , * html .windowContent , * html .pane
{
    zoom: 1;
}
*:first-child+html .clearfix , *:first-child+html .windowContent, *:first-child+html    .pane
{
    zoom: 1;
}