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> |
Use the tables, Luke
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
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
This appears to be fixed in IE7.
(My sanity thanks you for the tip.)
Yaar
This is common property of div.
I am using this
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″
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