Question

I’m developing a web page that has an outer floated left column and a regular right column.

The right column then contains a list of items where each item has a floated left column and a regular right column.

My problem is when a list item’s right column isn’t tall enough, the next list item is indented to be to the right of the previous item’s left column.

Convoluted? Okay, well I’ve posted the basic layout online.

I then removed items from a sublist so that one list item’s right column isn’t tall enough.

Finally, I tried correcting the problem using clear:both. The problem is that this clears the very outer floating div.

Is there any way to clear a floated element without clearing another, outer floated element?

Answer 1

In addition to your clear: both style, add an overflow: hidden or overflow: auto style to .MainRightCol to give it its own block formatting context:

.MainRightCol {
    background-color:#f5f5f5;
    overflow:auto;
}

This prevents the clear: both from clearing the .MainLeftCol float, because

The ‘clear’ property does not consider floats inside the element itself or in other block formatting contexts.

and the context which .MainLeftCol lives in is body‘s (or the viewport’s, I’m not exactly sure), so that’s outside of .MainRightCol‘s and its .ListItem children’s, which you apply the clear to.

See the updated demo.