I've received multiple requests for simpler CSS tutorials that teach the tricky fundamentals. This will serve as the first entry in a series that will receive new additions sporadically each month. Today, we'll be reviewing the overflow: hidden, and clearfix tricks to force a parent div to contains its children.
The Overflow: Hidden Trick
Have you ever noticed that when you float all of the children elements within a div, the parent takes up zero space? For example, in your code editor, adding the following within the body tag.
<div id="container"> <div id="main"> </div> <div id="sidebar"> </div> </div>
Now, let's add a bit of CSS to simulate a typical website.
#container {
background: red;
width: 800px;
padding-bottom: 2em; }
#main {
background: green;
height: 500px;
width: 600px;
float: right; }
#sidebar {
background: blue;
height: 500px;
width: 200px;
float: left; }
Above, we're simply setting background colors and floating the sidebar and main divs to the left and right, respectively. Note the "padding-bottom: 2em;". This should allow us to see the red background at the very bottom, right? View the page in your browser, and you'll see:
Where did the red background go? Why isn't it displaying?
The Solution
When you float all of the children, the parent essentially takes up no space. To better illustrate this fact, let's set an arbitrary height of 50px to the container, and then reduce the opacity of the children divs so that we can see the red background beneath.
#container {
.. other styles
height: 50px; }
#main, #sidebar {
opacity: .5; }
Refresh your browser, and you'll see:
How odd. We've specified a height of 50px for our container div, yet the main and sidebar divs blatantly overflow its boundaries, like spoiled bratty divs.
Return to your stylesheet, and apply one style:
#container {
...other styles
overflow: hidden;
}
After another refresh, we see:
Well that partially helps. Now, we don't have to worry about the pubescent children disobeying their parent. Having said that, this really doesn't help our situation.
"Try to avoid specifying heights as much as possible. There's usually a smarter method.
The solution is to rip out the height property from our container. Remove the following property.
#container {
...other styles
height: 50px; /* Remove this */
}
One last refresh, and our problem seems to be fixed.
You can also remove the opacity properties. They were just for demonstration purposes.
The Rub
The method demonstrated above will work in most cases. However, let's introduce another variable. What if we want to position an image on the border of our container, so that it overlaps. You've seen this effect many times. For the sake of the example, we'll just use an image of a circle with a transparent background. On a real site, this might represent a "Buy Now" or "Sign Up" button -- something cheesy like that.
Positioning the Circle
Using CSS, let's position the image in the top right portion of our "website", overlapping the edges. This is what we want:
First, we reference the image within our HTML.
<div id="container"> <img src="circle.png" alt="Buy Now" /> ...rest of html
Next, return to your stylesheet, and add the following styles.
img {
position: absolute;
right: -100px;
top: 20px; }
Positioning Context
One might think that this will place the image just over the right edge of the container div. However, he'd be wrong.
Because we have not set a positioning context, the window will be used instead.
Obviously, this is not what we want. To apply a positioning context to our container div, simply add "position: relative;" to #container. Once we've done so, the image will no longer use the window as a reference.
What's the Problem Now?
But now, we have a new problem! Because we set overflow:hidden to our container div, we've somewhat shot ourselves in the foot. How do we break boundaries and take names if overflow is set to hidden? Should we simply accept that this particular website won't be taking names today? Absolutely not. In these cases, it's worth using a different method.
The Clearfix Trick
With this method, we'll use CSS to add content after our container div. This created content will then clear our div, thus forcing it to contain its children. Now obviously we don't want to see this content, so we need to be sure to hide it from the viewer.
Return to your stylesheet, remove "overflow: hidden;" from your container div, and add the following:
#container {
... other styles
_height: 1%; }
#container:after {
content: ".";
visibility: hidden;
display: block;
clear: both;
height: 0;
font-size: 0; }
This might appear complicated, but I assure you that it's quite simple.
- _height: Triggers "haslayout" in Internet Explorer, by using the underscore trick to target IE6 directly.
- content: After the container div, append a period.
- visibility: We don't want to see the period, so hide it from the page. (Equal to setting opacity: 0;)
- display: Forces the period to display as a block-level, rather than inline.
- clear: The important property. This clears the main and sidebar divs. This is the same as adding an unsemantic <div style="clear: both;"> to our page.
- height: Don't take up any space.
- font-size: Just a precaution for Firefox. This browser sometimes adds a bit of space after our parent element. Setting the font-size to zero fixes this.
Conclusion
Though the overflow:hidden trick is preferable, it's not always ideal. You need to use the best solution for the task at hand. The important thing is to learn each method, so that you have the tools to solve the puzzle.
- Follow us on Twitter, or subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.
Related Posts
Check out some more great tutorials and articles that you might like
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )Daniel July 3rd
Interesting article, thanks for clarifying parent/children relationships.
( )D. Carreira July 3rd
Another well explained tutorial…
Thanks nettuts!
( )Bugsy July 3rd
Fantastic stuff.
The positioning of the circle answers a question I’ve been wrestling with for a while on one of my current projects. Once I get back to work on Monday I should be able to figure it out now!
Thanks.
( )Dan Wellman July 3rd
great tutorial Jeff!
Is clear-fix really a proper hack? It validates I think. I use it all the time, it works really well
( )Jeffrey Way July 3rd
That’s so funny that you mentioned that. I literally just changed the word “hack” to “trick.”
( )Vikrant July 6th
good “way” to define hack & trick
Vasili July 3rd
I never use the overflow: hidden; trick because I sometimes position things outside of the container and I don’t want to go back and change the CSS. I usually just end up adding a <br class=”clear” /> to the container div; it doesn’t bother me.
I’ll look forward to the rest of the series!
( )Jeffrey Way July 3rd
Semantics.
( )S. Sea July 3rd
“Fudamentals”?!
-Sean
( )Myfacefriends July 3rd
another amazing tuts! from Jeffrey Way! thanks keep on shinning!
( )James Harding July 3rd
Great tut…
Is this all still the same with CSS3?
( )Meshach July 3rd
Nice, very nice. Nettuts+ is back on track..
( )Jeffrey Way July 3rd
Was never off track.
( )crysfel July 3rd
hehehehehehe good joke
( )mary July 3rd
Excellent, thanks!! I look forward to the other parts of this series.
( )Ahmad Alfy July 3rd
I’ve used overflow:hidden alot, thanks for the second part. I’ve never used that!
( )Please note there’s a typo in the css :
rightright: -100px;
Thanks Jeff!
Jeffrey Way July 3rd
Yeah – that’s a stupid bug with the syntax highlighter plugin. I can’t fix that.
( )Ahmad Alfy July 3rd
Aha!
well you’re forgiven
Jonathan Sells July 7th
Phew, I was going to comment on that as well but thought it was a property or shortcut i wasn’t familiar with.
So to be clear, it’s a general flaw with the plugin and is only supposed to be”right”, because its all over other tuts as well.
Nate July 3rd
“Now, we don’t have to worry about the pubescent children disobeying their parent.”
LOL
( )Richard Testani July 3rd
Curious – why woudn’t floating the #container so it takes up the content fix all of this in the first place?
Also, what does putting a period at the end of your container do and mean?
Lastly, does IE6 support :after pseudo selector?
( )Jeffrey Way July 3rd
Yes – floating the parent will essentially shrink-wrap the contents. However, this isn’t always possible.
( )Chris Pratt July 3rd
Why is it not always possible? I exclusively solved these problems by floating the container until I learned of overflow:hidden. Since then, I’ve begun to incorporate that method more often except in areas where content must actually overflow.
However, I’ve never ran into a situation where floating the container was not possible. Clearfix has always just seemed to me a horribly complex and redundant exercise.
DN July 6th
Sometimes it’s not possible in the context of the page–meaning you can’t have a float here, or can’t without essentially having to then float all parent elements, which can get increasingly complex. Floating means things can break out of non-floated containers, thus the Floating (Nearly) Everything method is pretty much mandated if you want to control floats by floats.
I don’t have examples in my head at the moment, but I have that vague, distantly annoyed feeling when I think about floats and positioning together, so maybe there’s something that way too, for large layout-level chunks of the design.
Xgen July 4th
Right! I always use floating…
( )Pontus Johansson July 3rd
I’ve always used an empty div with clear:both to clear the floats. I know it’s not semantic at all (which I always strive for) but I haven’t been aware of any other way of doing it. Using :after for this is really smart, so thank you for that. But is there another way of making it work IE6 without the use of the underscore hack or any other hack? I mean, hacks should be avoided because they may cause problems in future browsers.
( )Jeffrey Way July 3rd
Not if you place the hack in an external stylesheet that is only imported if the user is browsing with IE6.
( )Pontus Johansson July 3rd
That’s true.
But hold on, is :before and :after even supported by IE7 and lower? Good ol’ quirksmode.org says it isn’t. Am I missing something here?
DN July 6th
That’s what _height is for.
Mike J July 7th
zoom: 1; should also trigger the hasLayout property.
( )crysfel July 3rd
Fundamentals are very important
this tutorial is awesome, I wish I could have read this four years ago…
( )Jonas July 3rd
The title of the article is currently CSS “Fudamentals” by the way. Maybe that’s intentional. CSS sometimes fills me with FUD.
( )Jason A. July 3rd
Excellent article! Still waiting for part 2 of that Login System, though!! =)
( )Jeffrey Way July 3rd
Will make a better one soon.
( )Man Mohan Singh July 3rd
Nice Tutorial for beginers…great keep it up…
( )Muhammad Adnan July 3rd
good tut jeff for beginners !
( )kevinsturf July 3rd
very useful stuff here Jeff. thanks for pointing out these stuff.
( )Aayush July 3rd
Nice Article…love the overflow hidden trick…I use it all the time…
( )Michael July 3rd
#container:after
( )after won’t work in IE6, so it’s sometimes better to use the clear:both on the next div or simple include an and create a clr-both class in your css file
Michael July 3rd
ouh.. it cleared my b r tag..
just use a specified clear class on a br tag, can also help
( )Raymi July 3rd
Another awesome article as always i have a question tho:
the whole clearfix trick is a feature only for CSS3? or is it always been there and i’m as a distracted person i never notice this trick? haha
please don’t think i’m a dork :$
( )Jeffrey Way July 3rd
Yeah – the clearfix method has been around for a few years.
( )Raymi July 3rd
danm!! that would’ve saved me a lot of headaches….well i guess that’s how we learn right? :S
Nikki July 3rd
Setting overflow: auto on #container would clear the float.
See: http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/
( )Jarryd July 5th
But as they explain, it can cause scrollbars to appear. I tried out the overflow: auto; method a couple of times with no success in removing those scrollbars so the hidden option has been suitable for me
( )Karl Oakes July 3rd
Thanks Jeff. always good to read a clearly explained tut.
( )PablO July 3rd
Nice article.
( )I have two suggestions:
1/ use content:”"; (empty string), it will also generate pseudo-element and you won’t have to hide it
2/ use width:100% instead of ugly (IMO) _height hack. It will also trigger hasLayout in IE and won’t break anything in real browsers ;]
Terri July 4th
Not happy with the hack either, but width:100% makes the container equal the width of the browser window. Not what we want here. Any other suggestions (besides a separate stylesheet)?
( )warzazi July 3rd
Good job Jeff, that was awesome !
( )actually i have a question, it’s about centering a div with a position:absolute; ?? how can we do that ??
Mirek July 3rd
Example: div {position: absolute; width: 300px; height: 200px;}
If you want to center that absolute-positioned div, you can add this:
top: 50%;
left: 50%;
margin: – 100px 0 0 -150px; // top-margin = height/2, left-margin = width/2
However, when the window is smaller than your div, it will get cropped top left
( )Michael July 3rd
round and round we go, dizzying circles to and fro
when finally comes like this dissertion
and fine’ly clears up old confusion.
like a lightbulb switched from off to on
i’ll again bow to o b wan
thanks jeff
( )IQ July 3rd
What about using “overflow: auto;” instead of “overflow: hidden;”?
( )With ‘auto’, your circle would be shown and the container would still be displayed correctly, no need for clearfix trick
Paulo July 3rd
Good Ideia Jeff. It Was…
( )Thanks For Posting It
James Hogan July 3rd
Thanks,
I wasn’t aware of the
:after selector;
or the content: property;
CSS3? This is cool
( )Jen July 4th
Actually the :after selector is part of CSS2. It’s just, in my experience, not often used because IE doesn’t support it.
Simple explanation of parents and children, Jeff! Thanks.
( )Mario July 3rd
I will try tihs next time. I’ve seen :after being used but never know how to use it.
( )Kenneth Stein July 3rd
Appreciate the time taken to set out this tutorial, and it has me wondering how much effort, time and expense has been wasted because of poorly conceived and executed standardization?
( )Obviously there are easier and more robust ways to layout pages, but those ways are sacrificed to appease various companies that have developed inferior technology, BUT possess other resources (money, experts, money, political clout).
Result: web designers that are skilled at the tricks required to get something simple done. Significant change hindered because time, energy, thought going into how to get a DIV to display correctly rather than imagining how can this technology make genuine difference for people?
Complete waste of time and while I know it’s FUN to solve puzzles, it’s better if the puzzles weren’t placed there by these companies to waste our time just because they aren’t hitting stride in developing their products.
Finally, it’s hilarious that you can’t fix the “rightright” bug. The technology we are using is crap. We ought to be so much farther ahead than this it’s really pathetic. Rightright? Rightright?
Philo July 3rd
Nice Article Jeffrey!
( )arnold July 3rd
will read this later…I havent read any stuff about CSS3..but hey thanks..this is really helpful.
I need more CSS topics!
thanks J.W
( )Fernando Martinez July 3rd
Hi there, this is my first CSS step-by-step tutorial I’ve follow.
I have one doubt…
why not use “float:left;” on the parent (#container) instead of all that CSS3 selectors?
I used float:left; since the beginning of the tutorial and got those childs obey
thanks,
( )Fernando
Name July 7th
You must use float: left on the parent (#container)! This trick is not necessary!
( )Jeffrey Way July 8th
It’s not always ideal. No need for exclamation points.
Eman July 3rd
this should be put in a class:
.hasFloats { _height: 1%; }
.hasFloats:after {
content: “.”;
visibility: hidden;
display: block;
clear: both;
height: 0;
font-size: 0; }
then, just add
class=”hasFloats ..”
to your parent containers.
( )Quevin July 3rd
So glad everyone is eating up the basics of CSS! Run, my children! Or, #Run:after…
( )j2eehunter July 3rd
Really Good article..
( )i was searching for these kind of article from many websites.
Thanks
Alex Persegona July 3rd
Great tutorial Jeff.
While I ran across other tutorials that dealt with this very same issue, your’s is very clearly stated (you’re a good teacher).
Another good example of CSS layout solutions can be found here:
http://warpspire.com/tipsresources/web-production/css-column-tricks/
Blessings
( )Saifudeen M July 3rd
nice………..
http://www.twitter.com/htmldeveloper
( )Dorian Lyder July 3rd
I’m loving the clearfix approach. I use overflow a lot and I always get tied up with overflow clipping the children when I want them visible.
( )Thanx.
Jonster July 4th
Nothing that interesting.
Positioning relatively the parent div and the absolutely positioned div counts it’s distance form the parent. Basic thing….
What comes to that :after pseudo-selector, why do you use this anyway?
( )CSS without hacks is always better what comes to that _height thing.
What if you just remove the :after selector and do this:
place a after the sidebar and remove the padding-bottom from the container?
Jeffrey Way July 4th
It’s not really a hack folks. It just saves time. Either use another property that triggers haslayout (like zoom: 1), or place the height declaration within an IE stylesheet and remove the underscore. You’re focusing on the wrong things here.
( )Jonster July 4th
What if you just remove the :after selector and do this:
( )place a “” after the sidebar and remove the padding-bottom from the container?
Jonster July 4th
What if you just remove the :after selector and do this:
( )place a div with styles clear:both and height: 2em after the sidebar and remove the padding-bottom from the container?
Jeffrey Way July 4th
Sure you could do that – but it’s unsemantic.
( )The Short Master July 4th
Great Tutorial man, good tricks, like that. Hoping to see some more very soon.
( )rohithpaul July 4th
nice one !
( )Christian July 4th
Sorry, but I don’t see this working in any browser – IE, Firefox, Opera or Safari. What’s wrong?
( )Christian July 4th
Oh well, I forgot to add ‘position:relative;’ to the container div.
( )Rick July 4th
Instead of using :after and applying the clearfix rules to the specific container, I like to give it it’s own reusable class: “.clearfix”. That way when I’m wrapping more elements that contain floats, it’s easy to just put class=”clearfix” and boom, it’s fixed.
Good tutorial.
( )Rick July 4th
An example of how the Blueprint CSS does it and fixes some inconsistencies:
.clearfix:after {
( )content: “020″;
display: block;
height: 0;
clear: both;
visibility: hidden;
overflow:hidden;
}
.clearfix {display: block;}
Stefan July 4th
That’s where I first learned the trick from!
( )Jubal July 4th
I can’t wait long enough for a competent GUI tool to hide this needed hackery completely from my virgin eyes.
That said, excellent tutorial. Thank you!
( )Webhostright July 4th
Thank you it’s well explained Jeffrey, i will look forward to the others in this series.
( )Nikki July 4th
Setting overflow to auto on the parent container of the floats would clear the floats, negating the need to use the clearfix method.
This isn’t without it’s idiosyncracies though: occasionally you’ll get scrollbars popping up. In my experience, this happens where the floats do not have a fixed height, and is easily remedied.
( )Paweł Ludwiczak July 4th
there’s little mistake in code:
img {
position: absolute;
rightright: -100px;
top: 20px; }
3rd. line: double “right”
( )Ben July 4th
excellent tips! Thank you so much!
( )Dan July 4th
Whilst I wasn’t looking for this fix specifically it certainly helped provide some insight into a minor issue I was having. Cheers Jeff.
( )Apoorv Vaidya July 4th
Thanks a lot Jeffrey, those are great! I always look forward to articles/screencasts by you.
( )Omar Abid July 4th
For the first problem why all those headaches? Floating always need clearing, so the next div need to be clear.
So we can simply add another div
And our problem is solved! No?
( )Omar Abid July 4th
This is missing.. delete it…
( )Omar Abid July 4th
For the first problem why all those headaches? Floating always need clearing, so the next div need to be clear.
So we can simply add another div
And our problem is solved! No?
“Hey, you have an error in code
#main {
background: green;
height: 500px;
width: 600px;
float: rightright; }
it should be
#main {
background: green;
height: 500px;
width: 600px;
float: right; }
or this won’t work
Good tut
( )PAblo July 4th
Instead of adding a div with clear:both why not adding this:
is this too unsemantic for you?
( )afaquino July 4th
Nice … learned a lot but pls. correct typ..
( )loat: rightright; } might confuse noob like me …
wtp July 5th
nice article thanks
( )so the clearfix method is more or less the same as just adding a clear both div at the end of the container div ?
dan July 5th
Really good article..
didn’t know u could do this :after selector; interesting !
cheers
( )awake July 5th
Mr Way…
Ur a good teacher. Can anyone tell me why Opera is not one of the major browsers on the market when they constantly come up with crazy innovations (e.g. face gestures)
http://www.youtube.com/watch?v=kkNxbyp6thM&feature=player_embedded
( )Jeffrey Way July 8th
Who knows. Not enough marketing….
( )Omar Abid July 31st
I tried it lately and it’s going to be my first browser of choice: it’s fast and feature-filled
( )kureikain July 5th
I think we can simply fix that by using clear:both?
( )Correct me if i were wrong!
Jeffrey Ridout July 5th
As Nikki mentioned in his/her comment, using the clearfix is yesterday’s technique… overflow:auto is a much better solution in that it doesn’t require extra :after css (I’ve even seen them hardcoded into the HTML).
I’ve blogged about this before:
( )http://blog.itwarlocks.com/2009/05/08/float-overflow-can-be-useful-too/
Jeffrey Way July 6th
As I mentioned, overflow should be your first choice. However, it’s not always ideal. It’s important to be familiar with this fall-back method.
( )Nikki July 9th
I was just trying to differentiate between overflow: auto and overflow: hidden.
floral July 6th
really thank you man:)
( )wayno007 July 6th
Great article, Jeff
( )Dante July 6th
Damn children make the parents work harder.
Thanks JW, great explanation.
( )Kent July 6th
Well, I guess I should go remove all of those fixes out of my code. Thanks for this elegant solution.
( )DemoGeek July 6th
I would prefer a clear:both and a dummy content of a blank space at the container instead.
( )rishteria July 6th
good stuff but forget “id” for css, it’s better use “class”
( )Nouman Saleem July 7th
how come?
Id = one item on the page.
class = for multiple.
sometimes it just helps to see what’s using an ID and a Class while coding.
( )Kangaroo_Deziner July 6th
Excellent solution. I had to try this out since I was under the impression that both the “after” psuedo-class and the “content” CSS attribute would be completely ignored by IE6, but it worked.
A clean and semantic way to clear floats across all browsers.
I had been using the overflow:hidden method when I could, but it didn’t always play nice with IE6.
Additionally, looking at the comments, there are 2 remarks I feel I must make, because people don’t seem to get it.
1. He doesn’t put a clearing div in there because an empty clearing div isn’t semantic mark-up.
2. He used the _height “hack” for simplicity sake. To make it not-hackish, simply put the “height: 1%” into a different external stylesheet and call it inside a conditional statement in your HTML for IE browsers that require hasLayout.
( )Alistair July 6th
I am fairly versed in HTML and CSS. This is very useful, sometimes you miss the basics when going along.
Thanks for the tutorial Jeffrey.
( )Louis July 7th
I think this article would have been more fittingly titled “containing floated children” since that is specifically what it addresses.
But great job on a simple tutorial, much better than some of the really complex stuff on this site, I think.
( )Aaron July 7th
It’s really best to have a separate clear fix than saying clearfix:after. “:after” isn’t supported in every browser. My HTML for a clear fix looks like this:
and the CSS looks like:
.clear { margin: 0; padding: 0; border: 0; clear: both; height: 0; }
and that’s it.
( )Aaron July 7th
Mister Ijoi July 8th
for the first time i saw very good article for beginner who to understand how CSS work. Hope i can use this articel to add my knowledge of CSS..
Keep it up..
( )shedh July 8th
keep it up, was going to ask for a new css tut
( )Matt July 14th
Very nice… thanks!
( )Daniel Balfour July 20th
Absolutely outstanding! What a TERRIFIC tutorial! Thank you so much! Tutorials such as theses make NetTuts a resource to be reckoned with! Please keep it up, so many are relying on your guys now
( )carlos July 21st
Nice tuto!! A++++
but I’ve a problem, I want to do the same thing, but two times. I need to show de circle in the other side, and in the top at the sime time.
could you help me?
( )PaulG August 1st
After taking removing “overflow: hidden;” from your container div, but without the clearfix trick in the css, I simply added a in my html like so:
This actually seemed to work for me
When I check it also seems to validate.
Jeffrey, would adding that tag be considered unsemantic?
( )dezinebuzz August 6th
good css startup
( )