I finally solved a CSS problem that has been driving me crazy on the theme I created for this blog. The fact that if you use a border on a block item (a DIV or H1 for example), the border will overlap a floating DIV. The text will wrap properly, but the border still extends into the floating DIV.

Anyway, the key to it is the overflow: auto; CSS attribute.

Without overflow: auto;

floating this to the right
This is a header

This is the main content of the page… I want the text to wrap (which it always does), but I also want the header border to not overlap the floating DIV (the problem).

<div style=”background-color: #eee; border: 1px solid #ddd; margin: 5px; padding: 5px; width: 300px;”>
<div style=”border: 1px solid #f00; float:right; width:100px; margin: 10px;”>floating this to the right</div>
<div style=”font-size:16px; background-color: #ddd; border: 1px dashed #0f0; overflow: auto”>This is a header</div>
This is the main content of the page… I want the text to wrap (which it always does), but I also want the header border to not overlap the floating DIV (the problem).
</div>

With overflow: auto;

floating this to the right
This is a header

This is the main content of the page… I want the text to wrap (which it always does), but I also want the header border to not overlap the floating DIV (the problem).

<div style=”background-color: #eee; border: 1px solid #ddd; margin: 5px; padding: 5px; width: 300px;”>
<div style=”border: 1px solid #f00; float:right; width:100px; margin: 10px;”>floating this to the right</div>
<div style=”font-size:16px; background-color: #ddd; border: 1px dashed #0f0; overflow: auto;“>This is a header</div>
This is the main content of the page… I want the text to wrap (which it always does), but I also want the header border to not overlap the floating DIV (the problem).
</div>
Update

Looks like it doesn’t work in Internet Explorer 6. Oh well, I’m over IE, so I’m not going to bother to come up with a weird hack. IE users will just have to upgrade to IE7 when it comes out I guess (or better yet, just use Firefox). :)