CSS Fundamentals: Containing Children

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.