Without wanting to stray too deeply in Simon and Stuart’s technical CSS territory, I thought this was worth noting.
For all it’s many advantages, sometimes it’s the little things that CSS layout makes difficult that really get to you. Clearing floated elements is a good example.
The Problem:
One of the simplest and most common layout structures involves the placing of a small, set-width DIV — perhaps navigation, a quote or a bio — within a larger wrapping DIV that contains the remaining content. In a markup this might be something like:
<div id="outer">
<div id="inner"> <h2>A Column</h2> </div>
<h1>Main Content</h1>
<p>Lorem ipsum</p>
</div>We can set the width of ‘#inner’ (let’s say ‘width:20%’), but, being a block level element, the main content will always wrap beneath, unless we float it (either left or right). Here our classic problem begins.
If ‘#inner’ is shorter than #outer, all is well.
However, if ‘#inner’ grows taller than it’s wrapping parent, it breaks through the bottom edge of ‘#outer’. It’s as if ‘#outer’ forgets it’s supposed to be keeping tabs on what ‘#inner’ is doing as soon as you float it.
As we can’t always control the amount of content in these DIVs, it certainly presents a problem. Here’s a typical example of the problem in action. (Thanks to Pixy for the neat little content-gen script).
The Solutions:
a) The Markup Method: The first and W3C-recommended approach is a little ugly - extra markup. At the very end of your content, toss in a cleared element - typically something like <br style="clear:both"/>. It’s the HTML equivalent of wedging matchsticks into your window frame to jam a window open. This works, but ‘dirties your page’ with stuff that only exist so it renders properly.
b) The Aslett/PIE Method: Less than 12 months ago Tony Aslett working with PositionIsEverything.com came out with a new method so diabolically clever that they had to have been sitting in a fake island volcano, stroking a large white cat and laughing fiendishly when they thought of it.
You’ll need to read the tutorial to get the full story, but, in short, they use a little-known, rarely-used pseudo class (:after) to place a hidden, cleared full-stop after the content. Combined with a sprinkling of hacks, this works beautifully - but gives me a headache over my left eye when I think about it.
c) The Ordered List Method: Last October Steve Smith from Orderlist.com published a slightly simpler method. Again, read his tutorial to get the low-down, but in short, his method involves ‘Floating nearly Everything’ (FnE), which naturally enough includes the outer DIV. This can have a considerable effect on the way your design stacks and as Steve says ‘it takes a little more tweaking’ but in general this method seems a little more robust to me.
d) That was my ‘current state of play’ until last week when SitePoint Forum’s own CSS Guru, Paul O’Brien, nonchalantly pointed out that adding a ‘overflow:auto’ to the outer DIV did the trick.
‘Rubbish’ I thought to myself.
Half an hour of testing later, I was amazed to find Paul was 100% correct - as this example shows. It seems that reminding the outer DIV that it’s overflow is set to ‘auto’, forces it to think “oh yeah.. I’m wrapping that thing, aren’t I?”.
This fact is so boringly simple that it’s hard to know if thousands of developers are well aware of it, but never thought to mention it. I know I showed the example page to four CSS-savvy SitePoint colleagues and all shock their heads, blinked slowly and said “Whaa…?” (or something similar).
From my testing, it seems to work identically in virtually every browser. Even IE4 seems to love it - only NS4 freaks out, and I’m not totally convinced a few hacks couldn’t get that working.
We haven’t had time yet to thoroughly test this method under rigorous match conditions, but so far there don’t seem to be any major drawbacks.
Certain combinations of margin and padding can force internal scrollbars. If you can’t ‘massage’ them away, we found ‘overflow:hidden’ has virtually the same effect without the scrollbars. The only drawback of ‘hidden’ seems to be the cropping of some images if they’re placed lower in the page.
Both issues seem very manageable.
Nice work, Paul.
If you liked this blog, share the love:
February 26th, 2005 at 7:13 pm
Absolutely wonderful Paul! You go :)
Missed that post where this happened, so thanks for the tip Alex.
February 26th, 2005 at 10:24 pm
Not working if you place #inner AFTER your contents. The reason why I puts #inner after my contents is that people prefer to have a direct access to the contents rather than to have to glance through all your menu. You just have to test by trying to navigate using the tab key.
But a big “bravo” to you because I do not remember having already seen this tips before.
February 27th, 2005 at 6:13 am
Hi, the float will still be cleared if you place #inner after the contents but obviously still within the parent container (#outer)
e.g.
February 27th, 2005 at 9:13 am
That’s a great solution and works pretty well - In firefox after you have clicked the ‘very long’ link you have to explicitly focus (click) the content to be able to use your mousewheel to scroll. This doesn’t happen in Example one and it seems to work ok in IE.
February 27th, 2005 at 10:02 am
I’m must say that even the example 1 from Pixy displays fine in IE6 SP1 under WinXP Pro. I had to view the page in Firefox to see what the problem was.
February 27th, 2005 at 1:42 pm
I found out that I was using a container for my contents (#content)
That explains everything…
February 27th, 2005 at 2:31 pm
OMG! Paul is a friggin’ genius! Congratulations you CSS Guru you! This will save me lots of time and headaches…
February 27th, 2005 at 5:54 pm
mniessen, as long as you set the outer DIV to width:100% in IE it will always clear the inner box automatically. This is a bug, according to the W3C, but a pretty useful one.
Getting Firefox, Opera, Safari to behave the same way has been the problem.
February 28th, 2005 at 8:26 am
Unfortunatelly, this is not really usable at the moment because of gecko bug with overflow:auto.
If you have absolute layer, positioned over overflow:auto element, FF will cancel :hover, :focus and similar as soon as your mouse enters the overflow:auto area.
February 28th, 2005 at 9:38 am
Hi Aleck,
Do you have an example of what you mean as I can’t seem to replicate it. I’ve positioned an absolute element over the auto element and the only elements that are hidden are of course the elements under the absolute element (assuming the z-index is higher of course).
Ive tried it with nested and non-nested absolute elements so I’m probably missing something here.
February 28th, 2005 at 4:57 pm
damm, what a stupidly simple fix. And here I was trying to get min-height working to fix these issues.
Cheers
February 28th, 2005 at 6:00 pm
In my tests where I’ve been using a modified p.i.e. method:
.clearme:after { content: "."; display: block; visibility: hidden; clear: both; height: 0; font-size: 0.1em; line-height: 0; }The above CSS is pretty robust, containing all manner of floated/non-floated content. Switching to overflow: auto breaks the layout on IE5, throws up scrollbars in Firefox.
However, using overflow: hidden; does the trick. The container div has an explicit width and no explicit height, and it just works, even in IE5 (Win/Mac).
The only problem with this solution is that using negative margins to push things around inside the container div results in their being clipped in Moz/Safari/IE6 (though oddly enough, not IE5, which I have to guess is misinterpreting overflow: hidden on a display: static div.
February 28th, 2005 at 7:29 pm
Doesn’t work in IE6. :(
Setting the containers width to 100% doesn’t help either (horizontal scroll bar in most cases).
What am I missing here?
March 1st, 2005 at 7:33 am
Just a note/word of warning: instead of setting width:100%; for the width of #outer, I tried height:1%; …
Which seem to work ok in IE6 and IE5.5, but totally collapses the height (to 1%) in IE5.0
Thanks for the article, this fix is just so brilliant and strikingly simple!
March 1st, 2005 at 5:14 pm
This *is* good news, except I am unable to get it working for IE/Mac. I’ll have to give the
overflow: hidden;method a shot.Thanks!
March 1st, 2005 at 6:30 pm
It seems to me (and I haven’t had time to test this thoroughly) that overflow: auto will effectively bring the bottom of the containing div to below ALL floats on the page in Opera (7.54).
This is also how Firefox behaves when you use a clear DIV — unless the clear DIV is contained within a floating DIV it will clear all the floating DIVs on the page.
March 1st, 2005 at 11:10 pm
i’m still going to be floating my parent div. it’s been working and i’ve never really found there to be any ‘tweakin’ that needs to happen. since it also looks like there’s still bugs that need to be worked out, I’m sticking with what still works.
March 2nd, 2005 at 7:56 am
Regarding the Gecko bug, here’s the bugzilla entry with examples:
https://bugzilla.mozilla.org/show_bug.cgi?id=125386
March 2nd, 2005 at 8:00 am
Yes there are some bugs with overflow, especially with mozilla. This obviously isn’t a definitive answer but just another piece of the jigsaw that will work in situations such as the main example above.
It does however seem to be a valid use and part of the overflow spec in that elements with overflow set will have their height calculated to include floats.
http://www.w3.org/TR/CSS21/visudet.html#q22
In a lot of simple situations such as floating an image with text alongside that doesn’t extend pass the image then it seems to work well.
More complicated constructs can cause it to fail but mainly due to browser bugs than a fault with the concept.
It’s still worth knowing about even if for interests sake only.
March 2nd, 2005 at 6:58 pm
Absolutely, Paul and certainly more than just interest value. For simpler layout components, it has to be the easiest solution to implement. And as so few people have been aware of this behavior till recently, I’m expecting that new eyes will bring some more understanding to some of the bugs showing up in more complex situations.
March 3rd, 2005 at 8:01 am
Paul has helped me out on SO many occasions I have lost count. He is very good at what he does and this continues to show it.
I have been using
for SO long, this might be my new best friend :)
Thanks for sharing.
March 12th, 2005 at 1:33 pm
Overflow:hidden causes Netscape 7.1 to hide my whole content! Overflow:auto causes Firefox to display artefacts on a very long page’s bottom.
Best example is one of my sub-pages http://mowlog.blogspot.com/2004_12_01_mowlog_archive.html
March 12th, 2005 at 8:38 pm
awesome stuff! thanks for sharing.
I was looking at the code for the examples, and saw a <kbd> tag. I have not idea this existed and what it did. I looked it up but w3c says it “Indicates text to be entered by the user.” I’m still in the dark though.
March 15th, 2005 at 8:27 am
Looks great! Can it be used for 3 column? I’m trying that but it’s not working. Any ideas?
thanks,
Jacob
March 15th, 2005 at 6:03 pm
hanumani, I mocked up a quick test when I first found this out, and it seemed to work.
I wanted the content to appear in the code before either columns, so I put the MAIN and LEFT column into their own wrapper DIV, and floated MAIN right. If you then set the wrapper to, say, 75% and float it left, any following RIGHT column will slot into the remaining the 25%.
The use of the wrapper DIV isn’t completely semantically sound, but it was the best solution I could find in 20 minutes of toying with it.
March 16th, 2005 at 2:32 pm
Paul ROCKS… Again!
March 23rd, 2005 at 6:21 pm
Paul, the bug is with event firing (I think). Take a look at this example: http://www.aplus.co.yu/css/ffoverflowbug/
It’s nested list transformed into pop-up menu plus a text block with overflow:auto applied. Move over second item and submenu will show.
Now, you can move your mouse over submenu part as much you like - if you stay clear of the text block, the submenu will stay open (visible). But as soon as you move the mouse over the block, the submenu goes away. It’s like :hover is canceled.
This does not happen in Opera or IE. This example of course does not work in IE, but I have developed drop-down menu (www.aplus.co.yu/adxmenu/intro/) like this with some helper code for IE so I know it does work correctly in IE.
June 11th, 2005 at 8:33 pm
I prefer the Aslett/PIE method.
In response to Zoe and aleck, that Mozilla Gecko engine bug is fixed in version 1.8, which is used in the beta versions Firefox 1.1. Hopefully, a new version of Netscape 8.x will be released shortly after the release of Firefox 1.1.
June 13th, 2005 at 3:27 am
From what I have tested, the main things that need to exist in your style rules for the container are the following:
You must use ‘overflow: hidden;’ so that IE 5 Mac will clear the floats
You must specify at least one dimension explicitly, either height or width. I recommend using width over height, so the container can expand vertically as needed, and since you typically will be able to control horizontal space easier, especially if you use margins or padding to limit horizontal space available for the container to expand into (like, say, having width of 100% on the container and using 4% left and right margins to make the container ‘flexible’).
You may use border-bottom OR margin-bottom to trigger the bottom of the container expanding down below the floats. I personally use a 1px bottom border AND a -1px bottom margin to prevent that unwanted 1px ‘line’ that a border might make (especially useful if you need to match up backgrounds on the container and another block below it).
I have also found that the overflow method is not always the best solution. Sometimes it is better to just put floats inside a container that is also floated. Obviously, when using float-in-float, always set at least one dimension (width or height), and always add ‘display: inline;’ to swat a bunch of IE float-related bugs.
A mix of the overflow method and the float-in-float method ought to take care of any float-clearing needs you have, and both work cross-browser with style rules that don’t require CSS filters, code forks, extra markup, or other ‘hackery’.
Hope this helps.
Standard Disclaimer: YMMV. I may have forgotten something, and I may be hiding something, but I am always doing something, and that is more than the lesser of us do who remember everything, have nothing to hide, and do nothing with that blessing.
Cheers
June 15th, 2005 at 9:29 am
after 45 seconds of testing i managed to break it in IE6 for windows - go figure..
http://www.pages.drexel.edu/~dja29/miscstuff/clearedContentBug.JPG
June 16th, 2005 at 6:50 am
Dan,
well, if the code stated as being applied to #outer in your jpeg is actually what is being applied, then you missed some crucial points:
1. you must explicilty specify a dimension along with the overflow:auto;
2. you must specify either a border-bottom or margin-bottom, or both
the first part of the trick is that you need at least one dimension specified for some browsers to apply layout semantics to a block with the overflow property set. don’t ask me why, its an enigma.
the other part of the trick is that setting the bottom border or bottom margin of the block is what causes the bottom edge of the container to clear the floated child elements when your overflow is set. that behavior is buried in the css 2 spec somewhere.
the last part of the trick is to set overflow to auto, scroll, or hidden (reportedly). we go with auto becuase scroll gives you scrollbars (duh) and hidden not only may cut off child elements who straddle the borders of the parent, but also triggers bugs in IE5 Mac and maybe others. a nice side-effect of using auto is that you get no initial scrollbars, but if some extra-long line of text sneaks into this element, scrollbars will appear and let that content be accessible instead of just being cut off or otherwise escaping their containing block. auto is pretty much all upsides :)
the moral of the story is to use ‘overflow:auto’, specify either ‘width’ or ‘height’, and add a ‘border-bottom’ and/or ‘margin-bottom’ to complete the technique.
now, i’m going to go rest my aching noggin ;)
cheers.
June 17th, 2005 at 2:30 am
I have been using this technique and seem to always encounter problems in IE6 with XHTML Trans doctype - I haven’t pegged that exact cause yet, but basically it has no effect in IE6 whereas it is working in every other Win/Mac browser I could test - weirdness, depressing weirdness
June 22nd, 2005 at 3:45 pm
I’ve been searching for a fix to another problem that you can see revealed in your example, as well (but no solution). Notice that the left border of the outer kbd box is cut off? I’m having a similar problem with my floated containers and other lines “intruding” into the box. See the floated right box towards the bottom of my beta page: http://zepfanman.com/beta
Thanks!
July 24th, 2005 at 5:30 pm
Just a note, for me, this doesn’t seem to work in Opera 6 for mac osx. At least that’s what Browsercam shows me. Anyone’s mileage differ?
July 25th, 2005 at 5:59 pm
I’m trying to implement this on a page redesign, and it works GREAT in Firefox. However, I can’t get this or *anything* to work in IE6 (not even the old standard clear:both). Can anyone tell me what I’m doing wrong? My test page is here: http://www.passionbreedsfollowers.com/julie/test/3col.shtml
Here’s the code for my #outer div:
#outer {
border-left-width: 140px;
border-left-color: #66000E;
border-left-style: solid;
border-right-width: 140px;
border-right-color: #dcdcb6;
border-right-style: solid;
padding-left: 25px;
padding-right: 25px;
padding-top: 40px;
padding-bottom: 20px;
background-color: #dcdcb6;
width: 370px;
margin-top: -3px;
overflow:auto;
border-bottom:1px;
margin-bottom:-1px;
}
July 25th, 2005 at 11:19 pm
Re: my prior post, I just went ahead and floated the relevant divs, which was ultimately a lot less trouble than I thought it would be, so that’s good. :) The overflow:auto works great until I bump into the margin/padding issues mentioned - I have some very precise float widths set and Firefox seems to want to add some padding where it’s not supposed to. So I guess I’m off to try the PIE fix, though I like this one so much better for its ease and simplicity.
July 26th, 2005 at 2:49 am
Jade: I’d take your word for it on Opera 6. We’ve found Opera users are generally pretty committed to the browser, and see it as their duty to upgrade whenever a new version is available, so I wouldn’t give older Opera versions with the same attention as, say, older IE users.
ChooseToLive: As you seem to have discovered, the overflow method is very useful, but weirdness can creep in as layouts get more complex. I know that the new ‘Feature article box’ on SitePoint’s cover gave me issues. I found Firefox calculated the distance fine until I narrowed the window past a certain point — where it collapsed to half it’s width. Still don’t know why.
Basically I take the overflow method as ‘first bullet’ and if I get into trouble I’ll just toss a ‘class=”clearfix”‘ on the DIV instead.
September 7th, 2005 at 5:34 am
Sorry guys, something really off the topic - i kinda like the bottom advertisement on this page, i would really love to have something like that for my site. I am still new to web design, any help will be really appreciated.
Thanks
September 7th, 2005 at 6:52 am
Veeru, it’s a method we’re testing and it’s been operating for about a week now. We’ve written it from scratch and we’re obviously still testing it. It’s all Javascript so you’re welcome to pull it apart. There is some discussion about it here.
September 7th, 2005 at 11:50 pm
Thanks alexW, well let me see what i can dig from there - Cant wait to learn to do that (if i can learn ! :)
October 25th, 2005 at 11:36 am
i’m having problems with “overflow: hidden” and “overflow: auto”, and it doesn’t make sense. When i apply it to a float, a little 20px padding appears (FF only) on the right side - it doesn’t show up in the DOM under computed styles. It looks like FF is making room for a scrollbar, but that doesn’t make any sense in the first case since :hidden inherintly implies no scrollbars. Once i take :hidden or :auto out, it displays correctly. The computed styles for margin, border, padding, and width come through identical in both cases, but visually that is not true. Width, bottom border were also set. Anyone have that?
October 25th, 2005 at 11:50 am
btw- when i refresh, the phantom padding disappears. but if i navigate away and then back ot the page it comes back.
October 26th, 2005 at 3:08 am
Shannon, have you got it anywhere where we could see it?
I’ve found beta 1.5 has been pretty skittish, so it may well be a temporary thing.
November 4th, 2005 at 1:24 pm
[…] Here are the general styles we will start with. First we reset the global margin and padding to default to 0. Next we apply our horizontal jump fix, give the body a background color and font stylings, declare our basic link styles, and creat a span class called “clear” for use in clearing our floats when necessary. I like to use this method of clearing floats (when overflow:auto) doesn’t seem to work because it is relatively little markup, has no effects on unstyled documents, and doesn’t require a lot of fancy css hacks. Make sure to specify the line-height, font-size, and height all to be 1px high and then give it a top margin of -1px - making your span totally “invisible” even though it has been declared as a block-level element. Finally we define the size, position, and stylings of our container div. […]
November 13th, 2005 at 10:50 pm
[…] Here are the general styles we will start with. First we reset the global margin and padding to default to 0. Next we apply our horizontal jump fix, give the body a background color and font stylings, declare our basic link styles, and creat a span class called “clear” for use in clearing our floats when necessary. I like to use this method of clearing floats (when overflow:auto) doesn’t seem to work because it is relatively little markup, has no effects on unstyled documents, and doesn’t require a lot of fancy css hacks. Make sure to specify the line-height, font-size, and height all to be 1px high and then give it a top margin of -1px - making your span totally “invisible” even though it has been declared as a block-level element. Finally we define the size, position, and stylings of our container div. […]
January 1st, 2006 at 8:29 pm
[…] SitePoint Blogs » Simple Clearing of Floats (tags: css) […]
January 2nd, 2006 at 9:16 am
March 2003:
http://www.mezzoblue.com/archives/2005/03/03/clearance/
Still a great tip though! And worth repeating for to encourage people not to dump extra unsemantic markup in their code solely to clear floats. :)
January 2nd, 2006 at 9:17 am
Hmm.. that should of course read March 2005! (sorry!)
January 17th, 2006 at 8:16 pm
[…] I read the answer in this page (and it is here I got the previous link). Thanks to Gomi to point me the solution. I would have linked the original post, but it unfortunately uses Archive: no and x-no-archive: yes, so no google groups. […]
January 20th, 2006 at 1:08 pm
It’s unlikely that anyone will read this far down, but I found that the combination that works for both IE 6 and Firefox 1.5 is
overflow: auto; height: 100%;Overflow does it for firefox and the explicit height does it for ie.
Cheers.
January 28th, 2006 at 2:27 am
nice work someguy.. This really helped me when clearing floating div with Firefox, IE, and Netscape..
February 2nd, 2006 at 9:33 am
Holy ..
Soooo many times I had this problem and this ..damn…simple…thing… resolves it?
Mr. Paul O´Brien - I love you.
February 10th, 2006 at 5:00 am
Son of a…….okay, I’m going to go find a sharp object and pound my head against it for a while….
February 13th, 2006 at 7:16 am
Doesn’t seem to work in i.e. 6 if my outer div is a fixed width and floated left, and my inner div is a fixed width and floated right.
I use the clearfix method successfully on other parts of the site, but no luck in this situation.
Gordon
March 10th, 2006 at 4:06 pm
Awesome. These little things are killer.
March 26th, 2006 at 10:45 am
Whoohoo thanks! Was looking for this quite a while!
April 2nd, 2006 at 5:14 pm
I cannot get this to work at all in FF, I have tried numerous solutions and nothing seems to work, I get scroll bars with auto, content cut off with hidden, but works fine in IE, except that I always use FF. Anyone else crack the FF issues?
June 11th, 2006 at 10:39 am
[…] Simple Clearing of Floats | Alex Walker | Sitepoint (tags: css tutorial) […]
June 13th, 2006 at 10:08 pm
This fix works great on my computer (and on all the browsers I tested it on), but when I put the page online, and the server is slow, sometimes the content is cut off (overflow: hidden) or scrollbars show up (overflow: auto) when using IE 6. When I refresh the page it works o.k. again. Anyone else has this problem? I’m sticking with the good old clear:both html trick ;)
July 16th, 2006 at 9:54 pm
Ouch! That was clever!!
This will save me from making ugly code and redundant tweaks in the future!!
Thanks!!
-Joel
July 20th, 2006 at 2:35 pm
Just when you thougth you had all the triks ironed out!
October 6th, 2006 at 7:23 am
Very nicely done! I’ve been looking for a solution for quite some time now!
David Levin
February 24th, 2007 at 2:05 am
Awesome! This fixed the background issue I was having with IE7 with my work’s site. http://www15.serrahost.com/fs4sportscom/StoreFront.bok Its still not working in IE6, but I’ll figure it out. :-)
March 8th, 2007 at 2:43 pm
It works better as:
overflow: auto; _height: 100%;This way FF ignores the height (which can get screwy if set to 100%) and IE 6 is all WTF? *ignore* to the overflow.
March 15th, 2007 at 8:57 am
There is one little problem in Firefox with this approach. User can select all the content with just one click.
Try clicking to the left of the columns here
http://www.mezzoblue.com/tests/float-auto/index-auto.html
May 16th, 2007 at 7:44 am
awesome !!
overflow woirks perfect thx a lot dude and happy styling !
spoison
May 16th, 2007 at 7:44 am
awesome !!
overflow works perfect thx a lot dude and happy styling !
spoison
May 23rd, 2007 at 4:07 am
I’m baffled by the Aslett/PIE method.
They contrived it ‘because CSS is supposed to minimise bloating of HTML for design purposes’
But they end up bloating the CSS to the extreme!
Yes, the screen reader doesn’t have to read another <br style=”clear:both;” /> (which isn’s a huge chore is it?)- but we do have out bandwidth chomped by ugly, hard to read CSS which seems to be against everything it was designed for.
But I guess the main point of the article wins- simplicity rules- and the overflow:auto method does the job with elegance.
July 23rd, 2007 at 3:51 pm
I’ve found that using overflow:hidden to clear floats causes some very strange printing bugs in Firefox. My best guess is that the overflow hidden limits the box size to the edge of the page, any overflow isn’t printed.
I decided to remove the float and the clear for the print version and specified it in the print stylesheet. Perhaps with overflow auto I wouldn’t have needed to? I’ll have to test it, but in any case it seemed to me that a simplified layout for print was appropriate.
Thanks for the technique,
Nicole
December 18th, 2007 at 8:04 am
Right-clicking a div with overflow:auto; results in an aesthetically displeasing border appearing around the element.
The fix: ‘outline:0;’
January 25th, 2008 at 10:53 pm
If you want to contain floated child elements in IE, you may also use
zoom: 1;, which causes ‘hasLayout’. (Place in conditional stylesheet, since it is not valid css.)March 9th, 2008 at 1:17 am
Thanks so much Paul and Alex, have been using the Positioniseverthing workaround for a few years, but the overflow is so stupendously simple I think most of us missed it since us developers probably assumed that overflow defaulted to auto in the firstplace.
Brian and tip, you’re life savers too… I never realised about the outline until I read your post and clicked myself to see the ugly border, and tips tip just fixed a nasty IE problem that hasn’t appeared in all my other sites I’ve built before. Conditional stylesheets are a given when Internet Exploder is concerned, thank crap for the
March 29th, 2008 at 11:12 pm
bloody marvelous!
March 30th, 2008 at 5:37 am
I thought it was perfect with my Firefox 2.0.0.13 but then when I tried it in Safari 3.0.4 (for PC) it didn’t display my overlapping content. :(
I want to optimize my site for Firefox, Safari and IE but have no idea what to do. Originally this was a table layout that I converted to CSS with ease, except for this stupid issue!
http://www.nocturnalsojourn.org/fire/div-index.htm
(see the sidebar? i also have the same issue when putting content into the area on the other side)
March 31st, 2008 at 12:07 pm
Unbelievable
April 3rd, 2008 at 8:40 pm
When I use FF DOM Inspector to look at my page, a weird thing happens. The element which has overflow:auto doesn’t blink when selected using the DOM Inspector node list - neither do any of its children.
Not a huge problem, but a bit strange.
April 28th, 2008 at 3:48 am
That whole overflow:auto and overflow:hidden thing did the trick!!!
Simple and effective!!!
Thanks
May 24th, 2008 at 7:44 am
One more thing that overflow:auto does in FF is add the div to the tab order. It becomes a tabstop and shows a focus indicator when you tab around the page. I forget where I found it but you can creatively work around the issue by adding tabindex=”-1″ to the div in the markup (won’t validate) and set outline:none in the CSS.
June 13th, 2008 at 6:01 pm
No way… just… wow.
THANK YOU SO MUCH.
I always use a
when I run into this problem… but this is so much better!Why does this need to be done? Is it a bug in just about every browser’s implementation of CSS, or does it fit the specification?
June 14th, 2008 at 9:12 pm
I experience the same problem as mentioned by “lucyconnuk” but overall 10++ :)
June 19th, 2008 at 1:37 pm
This is really unbelievable. Been coding pretty hardcore css/html for a few years now, and have always came up against this, and have been some pretty disgusting work arounds to solve it.
Amazing stuff, this just saved me a chunk of time. I obviously need to read up some more on how ‘overflow:auto’ is actually defined.
July 2nd, 2008 at 10:18 pm
the overflow:hidden or auto method is described in the 2006 CSS Mastery book
July 3rd, 2008 at 7:29 am
This post is from early 2005.