What the hell??!? (blah, blah of a wannabe alien)
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 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> |
| Print article | This entry was posted by Shawn on October 23, 2005 at 9:32 pm, and is filed under Coding. Follow any responses to this post through RSS 2.0. You can leave a response or trackback from your own site. |
about 6 years ago
Use the tables, Luke
about 6 years ago
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
about 4 years ago
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
about 4 years ago
This appears to be fixed in IE7.
(My sanity thanks you for the tip.)
about 3 years ago
Yaar
This is common property of div.
I am using this
about 3 years ago
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″
about 1 year ago
IE and Firefox treat overflow differently
re: No horizontal scrollbar for textarea
overflow: scroll;
overflow-y: scroll;
overflow-x: hidden;
overflow:-moz-scrollbars-vertical;
This should fix your problem for firefox and internet explorer browsers.
http://bytes.com/topic/html-css/answers/440530-no-horizontal-scrollbar-textarea