Skip to main content

How to make an element stretch to fit its contents

Submitted by helen on Wednesday, July 28, 2010 - 22:52; Modified on Wednesday, August 24, 2016 - 14:52

Floated content

If you have floated elements inside a parent container and the parent does not have a set height, you may have noticed that the parent behaves a little oddly: if the parent contains text, as well as floated content, it will only appear as high as the text; if the parent contains only floated content, it may appear to vanish from screen entirely. This is due to the nature of floats: they can overlap their parent element, and, also may not be treated as being part of the flow of the parent element.

Enter overflow

Obviously, to rectify the above, you could always give your parent a set height, but there are plenty of instances where this isn't ideal. So how do you get the parent to stretch to fit the floated elements inside it? The answer is to modify the overflow of the parent. The overflow property (which is shorthand for overflow-x and overflow-y) determines how to treat content that flows out of the confines of an element. By default overflow is set to visible, which will cause content to spill out of the confines of the parent element. To combat this, we must change the overflow property of the parent to auto.

Why set the overflow to auto?

The auto value for overflow typically tells user agents to render a scrollbar on the parent, when its children are overlapping it. This causes the below functionality:

CSS Code:


#scrollerBox {
	width:200px;
	height:100px;
	overflow:auto;
	background:#fb34bc;
}

#scrollerBox div:first-child {
	background:#fbf434;
}

#scrollerBox div {
	width:50px;
	height:50px;
	float:left;
	background:#34fbf4;
}

This box is two-hundred pixels by one-hundred pixels and contains text and two divs. Its overflow is set to scroll. Because the text is larger that the box, the horizontal and vertical scrollbars are rendered.
Div One
Dic Two

If the children aren't overlapping the parent, unlike above (where the height of the content inside the box is greater than 100px), then there is nothing to scroll and overflow:auto, will instead cause the parent to stretch to accommodate its children.

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/set 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.

Visualising the problem

Floated elements with text

CSS Code:


#containerEx1 {
	background:#e134fb;
}

#containerEx1 #child1, #containerEx1 #child2 {	
	float:left;
	width:50px;
	height:50px;
}

#containerEx1 #child1 {	
	background:#4234fb;   
}

#containerEx1 #child2 {
	background:#3496fb;
}

(X)HTML Code:


<div id="containerEx1">
	Some inline text.
	<div id="child1">
	</div>
	<div id="child2">
	</div>
</div>

Result:

Some inline text.
 
 

The parent is acting as if it only contains the inline text; the floated elements are not entirely contained in the parent, and are overlapping the bottom of the parent, which, as we discussed, is natural float behaviour. Another phenomena is also occurring here: the top margin of this paragraph, is collapsing, causing the paragraph to be shunted up directly underneath the floated elements. If you want to know more on clearing floats, visit How to clear floats with the CSS clear property.

Floated elements only

CSS Code:


#containerEx2 {
	background:#e134fb;
}

#containerEx2 #child1, #containerEx2 #child2 {	
	float:left;
	width:50px;
	height:50px;
}

#containerEx2 #child1 {	
	background:#4234fb;   
}

#containerEx2 #child2 {
	background:#3496fb;
}

(X)HTML Code:


<div id="containerEx2">
	<div id="child1">
	</div>
	<div id="child2">
	</div>
</div>

Result:

 
 

The background we applied to the parent is not showing up. It is as though the parent doesn't exist. The float is also leaking out and affecting this paragraph, causing it to shift upwards, next to the block on the right. If you want to know more on clearing floats, visit How to clear floats with the CSS clear property.

The fix

CSS Code:


#containerEx3 {
	background:#e134fb;
    overflow:auto;
}

#containerEx3 #child1, #containerEx3 #child2 {	
	float:left;
	width:50px;
	height:50px;
}

#containerEx3 #child1 {	
	background:#4234fb;   
}

#containerEx3 #child2 {
	background:#3496fb;
}

(X)HTML Code:


<div id="containerEx3">
	<div id="child1">
	</div>
	<div id="child2">
	</div>
</div>

Result:

 
 

In the example above, we have set the overflow on our #containerEx3 to auto, which has caused the container to expand to accommodate the floated divs.

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.