Why is this clear:both acting globally?

Issue

As far as I know clearing floats mostly works on parent items. But there is one issue in my template after the post thumbnail, where the clear: both acts on the whole content wrapper. Without clearing the float, the thin line will stick to the text right to the thumbnail.

What I want to do is to have the line 45px below either the thumbnail 开发者_运维问答or the text (depending on what height is higher).

Preview

Please have a look at this sample.

Any help would be highly appreciated!

Just use the overflow: hidden; hack to end floats.

Add the CSS overflow: hidden to the parent element.

EDIT

As a bonus. If you want to use some fancy CSS3 stuff (like dropshadows) the above hack will fail.

There is a new hack: http://fordinteractive.com/2009/12/goodbye-overflow-clearing-hack/

Although this hack also has some issues.

And it would take some time before you can make some serious use of fancy CSS3 stuff.

You could use it, but the browser support will be poor for a long time :)

I would recommend using a .clear class that could be used anywhere to clear floats, it would look like this:

.clear { height:0; overflow:hidden; clear:both; }

Insert it under your floated elements to clear them, it

Float the thumbnail div left and the text div left as well. after them, set a div

<div style="clear:both"><!-- --></div>

The div that contains all 3 of these will take the length of the heighest div.

Basically:

<div class="container">
   <div class="thumbnail" style="float:left; width: 50%;"><img src="whatever.png" /></div>
   <div class="text" style="float:left; width: 50%">My text</div>
   <div style="clear:both;"><!-- --></div>
</div>