Comments on: Simple Clearing of Floats

By: Sebastien

Sebastien — Fri, 03 Oct 2008 14:00:08 +0000

Wonderful trick, thanks a lot!!!

By: Rami

Rami — Wed, 03 Sep 2008 09:27:53 +0000

the answer is simple, just use main wrappers, and wrap you divs carefully, i use main wrapper to wrap the header for example and the sub wrapper, and i use the sub wrapper to wrap the columns and the footer, it works 100% it’s a bit tricks because you have to make sure the sub warper background color matches the main wrapper one and make sure the borders are not messed up :D in other words it floats my boat

By: lionel87

lionel87 — Thu, 28 Aug 2008 01:06:30 +0000

I found a ?new? solution for clearing floated divs in IE (all versions)

div { width: 100% }

since all divs are 100% width by default, this looks fine for me.

to achive the same result on firefox, im using the old way (overflow:hidden/auto) with conditional comments to keep the source cleaner for IE

By: Noparanoia

Noparanoia — Mon, 25 Aug 2008 21:34:00 +0000

Oh GOD, thanks you, I was using spacers for years.

By: ezt

ezt — Sat, 16 Aug 2008 23:22:30 +0000

another site which has a good explanation of the same thing:
http://www.quirksmode.org/css/clearing.html

I like to note that it’s not a 100% css solution, even though some people may think that(?). Sometimes you need to ADD a wrapping div in the html code, because it’s not always there already! Not that it’s a problem, besides i don’t believe in 100% css solutions anyway. To me, structure(html) and css go together. The layout of the page follows (or should follow) the structure of the html. This means i use floats instead of position:absolute. A page flow with a lot of positioning, seems to be less accessible/readible for blind people and such.

By: Ricardo Zea

Ricardo Zea — Mon, 11 Aug 2008 22:46:08 +0000

I don’t know if anyone has noticed for more than 3 years, probably someone has mentioned it in a comment above somewhere and the author didn’t read it or doesn’t want to change it… but the demo and the actual quote about the solution say/use:

“… ‘overflow:auto’ to the outer DIV did the trick.”

And the current (8/11/08) CSS file uses overflow:hidden; and it still works.

#outer {
	background-color:#fff;
	overflow:hidden;
	padding-bottom:0px;
	width:100%;
	-moz-border-radius: 0 0 15px 0;
}

Both work, of course :), but I just wanted to point this out. It’d probably be good to update the CSS file then?

Bytes,

By: peach

peach — Fri, 08 Aug 2008 08:37:50 +0000

btw it wouldnt be smart to build a layout and start out putting overflow:auto on all containers… as the layout will grow in complexity you’ll start to see scrollbars popping up allover the place, if you start using layout tools like out-of-flow positioning, negative margins etc.

By: Tenzin

Tenzin — Wed, 06 Aug 2008 19:10:45 +0000

hi rambohoho

You can’t put all your content in topnav DIV with height of only 20px. Take everything out of TopNav DIV and correct our CSS. Nachher Ich schaue noch.

By: rambohoho

rambohoho — Wed, 06 Aug 2008 09:04:51 +0000

hi, I’ve spent tones of hours working on this problem. but didn’t find a way to come out yet. this is the page I’m working on.
http://bmk-innovas.com/new/aktuelles.html

here ’s the css page

http://bmk-innovas.com/new/bmk.css

I tried your resolution but then there will be scroll barr inside the white page. what I want is a scroll bar inside the window.

maybe you know the answer. :-)

By: Laura Lipizzan

Laura Lipizzan — Sun, 03 Aug 2008 00:02:27 +0000

I cannot believe that I have spent more than 16 hours online (about 8 of those hours at Mozilla sites) looking for a solution to this problem, and, finally, I came upon your site.

Eureka !!! My Lipizzan.com site displays in Firefox now with its scrollbar. Before I used your solution, it was even difficult to scroll down with the Page Down key or the down arrow key.

I used: overflow: auto; height: 100%;

During all those 16 hours searching for a solution, it became known to me that my “home made” html from about 13 years ago (including subsequent, noncompliant tweaks) is totally outdated and not browser friendly to begin with. I do plan to redo the entire site in modern day standards for code . . . but, not right now.

Anyway, you saved me. Thank you so much. I am going to put a link to your website on all of my websites.

Do you take donations? I hope someone pays you for your intelligent, linear and brilliant analysis and solutions.

And, if I may add more:

your very clearly and thoroughly written, easy to follow instructions,

for both CODE-COMPLIANT NEWBIES and the 78-45-35 RPM-VINYL RECORD-TYPES*,

with the the technical and gory details optional for the reader.

AAA+ to you !

Laura Wiener-Smolka
e m a i . . . .
Lipizzan ^ hollinet ^ com

* I’m one of the RPM type author/webmaster of 11 websites: 4 personal, 5 public agency/org, 2 commercial(the only ones I receive a few $ for — ha ha).