Thanks for the tip on the overflow hidden for comment text. Text wrapping around image always bothered me and I always had to come up with workarounds. Your tip will saved me lots of time.

I’ve always used overflow : auto as a means of clearing divs. The scrollbar issues have always been minor and tend to arise when you are working in a confined space, like a header with set height.

I had no idea about the overflow : hidden trick in your second example, that’s going to be put to use sometime soon.

What? Huh? This is like a revelation? All this time I’ve been using the guillotine CSS to clear floats. If this is so easy and clean, howcome this hasn’t become mainstream? I’m surprised I never knew about this. Any catches? Browser compatibility?

You are right – I burrowed this solution deeply …
On quirksmode I read amending:

width or height required
The use of a width or height declaration is required to make the effect work in Explorer Windows and Opera. If you don’t include it Explorer Windows continues to show the border at the top of the columns, as if there were no overflow. Opera completely hides the content of the container.

A width: 100% is a neat starting point, although more complicated layouts may require other values.

Useful, i’ve never heard about that :)

Been using overflow:hidden forever. But I question the design quite a bit on this. Why should we lose height properties of the container element when elements inside use float? That seems very unintuitive.

I use { display:table } to expand containers automatically.
Works like a charm, and still use margin, padding, etc…

can not work in IE6.0

If you giive overflow:auto it will give more space which again you need to play with the width:

instead why not only give

.container{
background: none repeat scroll 0 0 #E6EEF2;
border: 1px solid #999999;
padding: 10px;
float: left; /*Add this Property*/
width: 94% /*Add this Property*/
}

Now if you check in any browser it will work similar No CSS hacks needed incase if you want to need this Container where there is no Float Needed and then make a class .noFloat with float:none and inherit it in Container.

Problem Solved

Okay this seems to be a revealing. I never knew it was possible to sort of ‘clear’ floats with the overflow auto!

So all those times i’ve been using and extra div for the clear it could and can also be done just by using the overflow auto on the container/wrapper of the floating elements?

I’ve tested it with a simple layout:

FOOTER


with the styles


div { margin:0; padding:0; }
.wrap {
margin:auto;
width:900px;
height:auto;
background-color:#9F3;
overflow:auto;
}
.footer {
margin:auto;
width:900px;
height:120px;
background-color:#0CF;
}
.left {
width:400px;
height:auto;
float:left;
background-color:#CC0;
}
.right {
width:400px;
overflow:auto;
background-color:#693;
}


And it works like a charm! not even need to flow the right column and the footer’s nicely pushed away.

I’ve tested this on all browsers except explorer. Could someone aknowledge it also works in explorer?

Great post!

I used that too some time ago. But this method has some problems with the page break when printing the website… at least in Firefox.

Using the clearfix instead:

.clearfix:after{content:”.”;display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-block;}
* html .clearfix{height:1%;}
.clearfix{display:block;}

Works in IE6 but the class is needed in the markup.

Thanks for the tip. Putting in that extra DIV has always annoyed me.

Nice reminder – I used to know this, but almost forgot about it … As chance would have it, I have a situation right now where I can use this! ;)

Re: IE6 workaround

I used to always use this technique but tend to use the clearfix technique more now. The overflow technique is still handy though in cases where you don’t want to add an additional class to a div. However, if you need to support IE6, using overflow: hidden alone doesn’t work.

Solution
You need to either add height: 1% or zoom: 1
It seems you can add height:1% to the parent div without it effecting IE7, IE8, Chrome or Firefox. However to be a little more semantic, you should probably set up an IE conditional stylesheet specific to IE6. Alternately, if you aren’t against hacks in your css you could just use *height: 1%, which will only be rendered by IE6 and IE7.

Personally I go with an IE6 conditional stylesheet or zoom:1 (depending how lazy i am).

Unfortunately, at the moment I can only test this with IEtester so it may not be 100% reliable information. Maybe if someone can confirm with an authentic IE6 install.

Give it a go :)

I’ve found that using “display: table;” can also work. I haven’t used it extensively so I’m not really too sure of any problems it could present. Anyone know anything else about using it and any problems it could bring up?

@Boolian

Are you for real? Man, forget about IE6!
Haha i ain’t paying attention just for that mistake called IE6 :)

@Alex

I agree with you completely about IE6 :-) Most projects you can forget about it… However some of us work with corporate environment clients who still run IE6. Alot of these companies have core systems in place that only work in IE6 and are unable to upgrade… some just have lazy IT departments. It’s a sucky situation but what can you do. IE6 isn’t dead yet unfortunately :-(

I made similar before and it works ;)

Thanks for this tip. It would come handy, hope there are no cross browser issues with this trick.

Also wanted to point out that there are 2 mistakes in the post:
– The illustration for Comments Block says overflow:auto when it should be overflow:hidden
– Images for ‘Max-Width’ and ‘Word-Wrap’ need to be interchanged.

I thought I had read this somewhere!! I use this all the time rather than using a clearfix or similar methods, and I started to question if it was ‘acceptable’ or not. However, I’m glad you mentioned the drawbacks with this. When trying to position child elements outside of the container with overflow:hidden set, that certainly does become an issue.
I’m surprised at the attitude towards IE6 on some of the below. I was surprised to see some stats recently on the percentage of users still using IE6, mainly from large corporate companies.
Thanks Nick

Wonderful tip! In the years I have been wrestling with CSS been looking for my divs to do just this! Awesome!

If you use overflow: auto; to clear the floating, some browsers also need a value for the “width”-property on the container.

Great tip :)

Great article and very nice tip,
Marios

wew.. I dont know this technique..

Thanks you very much for share this info. hehe…

Simple, but great article! You wouldn’t believe how many complex, messy solutions I see for clearing floats every day! These are key concepts to master early on for anyone who is serious about learning CSS.

Thank you!! :)

Very useful tips, thanks a bunch!

Hello Guys!

Why don’t we use simpe “display:table”? If we use this on our container boxes, the children floating elements will expand the containers.

In most cases this is the simplest and most reliable method of float clearing – thanks for explaning so clearly. The code blocks for large images and long lines of text shown above are back to front.

As always, Well Done. I have used this method a few times and it is one of the most reliable was to clear a float in websites…

less mark up its rocks!

@Jeff Starr

Elements with “overflow: hidden;” will still render box shadows however after some testing I discover that while “display:table” will clear floats, it will stop a box shadow form rendering.

Thanks guys! This trick is awesome, just bookmarked it ;)

man i dont get it. can u email me again pls?

OMG! I’ve do that about 5 days ago when I was coding my new portfolio ;)

awesome tip, thank you, I need to remember this instead of always adding clear floats everywhere

awesome technique… helped me a lot recently. Good idea to post it ;)

Good topic thank you

https://webdesignerwall.mystagingwebsite.com/tutorials/css-clearing-floats-with-overflow/

yeahh, good tutorial. i think its better than the clearfixes like them from sonspring.

Really incredible tip, thank you. I need to implement this instead of always adding clear floats while developing.

Very useful, thanks for sharing!

Using this method for long time now and still think that this is the best method for clearing floats.

I didn’t know this trick, it’s really useful and works well even on IE7. Unfortunately it doesn’t work on IE6, but I know it’s time to forget about it,isn’it?

yeahh, good tutorial

display:inline-block or float:left/right work as well.

@Keith Davis (89)
“I use “…adding an element with clear float after the floating elements…”
Does the job and no downside.”

No Downside? Unneccessary DOM elements? It’s HTML dealing with stuff that’s CSS’ business… At work we call that a pussy div.

An old trick that I’d tell everyone that’s new to the field. Use with caution though but 9 times out of 10 I’d use this.

I LOVE DESIGNER DOODLES.

in this case instead of using the ‘div’ a simple ” after the element also addresses… not?

in this case instead of using the ‘div’ a simple br w/ clear=”all” after the element also addresses… not?

very nice tip! thanks!

It fulfills my need

Fantastically displayed. really nice post to read about. Thanks for sharing. Our inhouse web designers would be happy to learn about.

Thanks yaar, solved my problem for which i was searching stuff from the past six months. The thing which was useful for me was and one thing i had a error was i made parent tag relative and child tag position absolute which was the error from those days. I removed the position tag from them and added the clear div. Its working fine now. Thank you.

really is very useful and very important point of view.

i’m new learner . and i’m always confused by the overfloat code . i don’t know where should i coding it , or even when the problem appeased , i don’t know how to deal with it . your post inspirate me . thanks .

Thanks dear….
this is really an awesome solution. i try it and it works well

I would just like to say, what a beautiful header and footer you have here Web Designer Wall!

Useful posts…easily understadable about floating div’s. Word wrap and Max width examples swaped.

This is verry good.

Nice! That is the good solution. Thanks for sharing it..

a good article!
mont blanc pens

this is so handy!! as a bit of a CSS novice this is going to make life so much easier

nice stuff i like it

Great article! Thanks for posting.

Very useful information. It is good to learn this. :)

I had issues with the first probleme which is the wrapper box which dosn’t fit to the floating box, and comes your article !!!

Magic, thank you !

Wouldn’t “display: table;” in the main div solve this issue?

Thank you a lot for your solution. It is very helpful for me :)

thanks