I am currently working on a site that has content and widgets displayed as a series of boxes. Each box has been designed and styled as a div, and looks/works perfectly. It results in stuff in this format:

<div class="content">
     <p>this content boxes stuff</p>
</div>
<div class="content">
     <p>different, semi-related content</p>
</div>

On occasion, the last thing in a content box will be floated (think along the lines of a "More" link that is floated right). If this is floated, it tends to jump out of the containing div. My current solution to this problem is a line break that clears the floats. So I'd have <br class="clear"> with the following in my CSS:

.clear {
    clear: both;
}

This eliminates the problem, but creates a line break where I don't necessarily want one. Does anyone have any simple solutions that I can use to meet both of these requirements?

Thanks,
Cory

Collapse the line-break space and it won't be noticeable:

.brclear {
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;

There's also the clearfix:after method:
http://css-discuss.incutio.com/?page=ClearingSpace

Thanks, collapsing the size of the br seems to be working well.