How to make an element stretch to fit its contents

I've covered this topic in The Top 10 things you've always wanted to do in CSS, but felt I should write a dedicated tutorial on the subject because it's one of the main things people ask me. It is also a big reason why your layout may not be rendering correctly.

Enter overflow

A myriad of problems you will encounter in CSS will have something to do with an element needing to "stretch" to fit its contents: floating issues, content overlapping etc. This problem is solved via the use of a the CSS property overflow combined with the value auto to create a Holy Grail property-value pair you will use time and time again — overflow:auto.

Why overflow?

The overflow property is most suited to this task because that is what it's intended for — handling the overflow of an element, which is what you're dealing with when you're talking about "expending" an element to fit what is inside it. That is the overflow.

Using definite heights can work, but it's more accessible if the height of an element will adjust dependant on what is inside it. It sets you up for less of a fall in the future when you modify your site.

Getting that element to stretch...

Well, you know that setting overflow to auto is the key to getting your element to expand to accommodate its contents, but we're not quite done yet. There is one more component needed in order for this to work: the height of your container (the element you're applying overflow:auto on) must not be a length value, i.e, your height has to be either nothing (no height value), height:auto (which is basically the same as specifying no height) or height:100%. Definite heights with an overflow of auto will, if the content drops below the height of the container, cause a scrollbar to appear. While that's useful, it's not really what we want in this particular instance.

Example of overflow:auto

CSS Code:

        #containerEx1 {
        	background-color:#99F;	
        	overflow:auto;
        	height:100%; /* For IE6 */
        }
        
        #containerEx1 img {
        	float:left;	
        	margin:0 10px 0 0;
        }
        

(X)HTML Code:

        <div id="containerEx1">
        	<img src="../images/element_stretch_bg.jpg" alt="Test Image" />
        	<p>This is a paragraph floated next to an image. The parent div is the same height as the image.</p>           
        </div>
        

Result:

The overflow:auto causes containerEx1 to expand and fit the paragraph and the image inside it.

Without overflow:auto

Here's the same example as above, but minus the overflow:auto.

CSS Code:

        #containerEx2 {
        	background-color:#99F;	
       	}
        
        #containerEx2 img {
        	float:left;	
        	margin:0 10px 0 0;
        }
        

(X)HTML Code:

        <div id="containerEx2">
        	<img src="../images/element_stretch_bg.jpg" alt="Test Image" />
        	<p>This is a paragraph floated next to an image. The parent div is obviously not the same height as the image.</p>           
        </div>

        

Result:

Without overflow:auto, it is as if containerEx2 doesn't recognise that it has something inside it. The float on the image would leak out, except I added in a sneaky div underneath, with clear:left applied to it, to clear the float. In case you are not aware of clearing floats, it is a process that is used to remove either a left or right float or both, using the CSS clear property. As I have a left float on my image, I must clear it using clear:left. I could have used clear:both, but there really is no need as the float is only on the left. Without the clear:left underneath the example above, the rest of the text on this page would be rather messed up!

If you want to know more on clearing floats, visit How to eliminate unnecessary tags by using CSS clear property.

Block elements

In order for overflow:aut to do its job properly, you must ensure that your container is a block element. If it isn't, you can convert it to a block element by setting the CSS display property to block — display:block.

A note on IE6

If you want overflow:auto to expand your element in IE6, you will need to always pair it with height:100%; the height:100% is not needed in newer releases of IE or any other browser (big surprise there!).

When to use overflow:auto

Your main reason for needing overflow:auto will be when working with floats. If you're using floats on anything, even if it is one element, the parent element must have overflow:auto to render on screen (like the above example). It doesn't matter if the floated element has something inside it, definite dimensions, height:100%, height:auto or no height, the parent will act as if it has no content, unless you give it an overflow:auto.

Disaster can ensue with floats, in the absence of overflow:auto, for instance float leakage, which can totally mess up a page.

You don't need overflow:auto when creating CSS columns but it can be useful, in case you add in floated elements at a later date.