« I’m Going To Kill The Chargers
Pink To Green Dot Illusion »

Sunday, October 23rd, 2005Sunday, October 23rd, 2005

CSS - overflow: auto;

by Shawn @ 9:32 pm · filed under Coding

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>

UpdateLooks 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). :)

6 Responses to “CSS - overflow: auto;”

  1. Bud Says:
    October 27th, 2005 at 11:05 am

    Use the tables, Luke

  2. Bud Says:
    October 27th, 2005 at 11:16 am

    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

  3. Jonathan Wagener Says:
    June 15th, 2007 at 2:19 am

    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

  4. Archrux Says:
    October 17th, 2007 at 7:46 pm

    This appears to be fixed in IE7.

    (My sanity thanks you for the tip.)

  5. Ajay kumar singh (ajay1kumar1) Says:
    April 8th, 2008 at 5:47 am

    Yaar
    This is common property of div.
    I am using this

  6. Ajay kumar singh (ajay1kumar1) Says:
    April 8th, 2008 at 5:47 am

    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