Question

I’m creating a list of search results, using an unordered list, each <li> is made up of 3 sections (floats):

http://jsfiddle.net/danmofo/fYMrL/4/

My problem is that everytime the text inside <p> exceeds the width of the the column, the floats cascade down the page, breaking the layout.

It’s been a long day so probably a minor error somewhere, but I cannot see it.

Things I’ve tried doing when the text cascades:

• Making all elements inline
• Defining specific widths

Any help is appreciated, especially link to an article/some information about it, thanks.

Answer 1

Give your floated elements widths, or the floats won’t work predictably.

Something like

div.left-side{
    float: left;
    width:40%;
}

div.right-side{
    float:right;
    width:20%;
}