CSS – overflow: auto;

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). 🙂

7 thoughts on “CSS – overflow: auto;”

  1. I’m using Opera 8.5 and the comments don’t show up properly either. The comments are placed below the right sidebar, so for short posts there’s a big white gap below the main text.

    Also, if I view in fullscreen in Opera the sidebar as well as the post headers disappear

    Positioning in CSS sucks. It’s just re-solving a solved problem in a quirky incompatible way

  2. Hi,

    I am developing a clients site and am having a problem with my css overflow:auto.

    It all works cool but when the scrollbar is initialised in IE7 I cannot scroll with the mouse wheel. It all works perfectly in FireFox.

    Please could you help as this is kinda urgent.

    Kind regards,
    JW

  3. div style=”height:532px;width:210px;overflow-y:auto;scrollbar-arrow-color:white; scrollbar-face-color: #e7e7e7; scrollbar-3dlight-color: #a0a0a0;scrollbar-darkshadow-color:#888888″

Leave a Reply to Bud Cancel reply

Your email address will not be published.