The Overflow Property

As we have seen every single element on a page has rectangular box. If you don’t set the height of a box, the height of that box will grow as large as it needs to be to accommodate its content.

What happens when you do set a width or height and the content is too big for the box? This is where the CSS overflow property comes in. There are four values for the overflow property:

visible
The default. Content that extends beyond the box does not affect the flow of the document.
hidden
Hides any content that extends beyond the box. Hidden content is just that. It can’t be read unless you look at the HTML source.
scroll
Hides the content that extends beyond the box, but will offer scrollbars to scroll the interior of the box to view the content. Will add horizontal and vertical scroll bars even if not needed.
auto
Similar to scroll value but only adds scrollbars when needed the content

The following code …

.box{
    height:200px;
    width:250px;
    overflow:auto;
    border:1px solid #CCC;
}

… would result in scroll been attached to the box as follows:

I just wanna say
I haven’t been away
I am still right here
Where I always was
So one day, if you’re bored
By all means call
Because you can do
(But Only if you want to)

—-

I just wanna say
I haven’t been away, oh
I am still right here
Where I always was
So one day, when you’re bored
By all means call
Because you can do
But you might not get through, honey

Note: We will see a use for the overflow property in relation to ‘floats’

Floundering with Float

If you remember every HTML element is inside a box. What float does is move that box either to the left or right of the screen. The float property takes the values left, right and none. Doesn’t sound particularly exciting but this is one of the most used CSS properties when creating page layouts. Is it also regularly used to position images such that text can wrap around the image. If we create a CSS class selector with a sensible name such as imgfloatleft like so:

.imgfloatleft{
    float:left;
}

… and the image was assigned the class

<img class="imgfloatleft" alt="" src="somepic.jpg" />

It would result in the following

Must Be Built Sample ImageLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

If we wanted it to float the right we could use:

.imgfloatright {
    float:right ;
}

… and the image was assigned the class

<img class="imgfloatright " alt="" src="somepic.jpg" />

Of course the class name used are entirely upto you.

Tip: A common feature of a stylesheet are a couple of classes for floating images to both the left and right.

In the above example the float property can be used to make text flow around an element such as an image. However it is often associated with logic divisions <div> floating them to either the left or right to build up layout. Take the following HTML.

</pre>
<div class="floatLeft">Float One</div>
<div class="floatLeft">Float Two</div>
<div class="floatLeft">Float Three</div>
<pre>

Add the CSS rule

.floatleft{
    float:left;
    width:50px;
    border:1px solid #CCC;
    background-color:#FF0;
}
Float One
Float Two
Float Three

When you float an element it ‘floats’ to the top and in this case the left of the document. I like to picture this behaviour of been like swimming pool floats. Did you ever as a kid try and stand on a swimming pool float. Always a bit of a challenge because the float wants to get to the top of the pool. If we add to that behaviour a slight current in our swimming pool, to say the left hand side of the pool, then you are starting to picture the behaviour of float.

Continuing the analogy if you have lots of swimming pool float they all want to get to the top. As such they will pile up next to each other like so.

A Blue Swimming Pool Float
A Pink Swimming Pool Float
A Green Swimming Pool Float

In the above example the images in the HTML are added in order blue, pink, green As the green float is the last added in the HTML it is furthest away for the left hand side as bluey and pinky have got there first. If floated right but still in the same order in the HTML they would look like follows:

A Blue Swimming Pool Float
A Pink Swimming Pool Float
A Green Swimming Pool Float

So the blue float is called first by the HTML. It’s CSS kicks in to float it to the top right and it takes up the position on the extreme right. The pink float is the next to be added in the HTML and again is told by the CSS rule to float right so. It does as it is told but the blue float has already take that position so it sidles up against bluey. Greeny follows the same pattern.

What you are seeing here is the influence of something called ‘normal flow’. Normal flow is the position of elements in the HTML document.

In normal flow, elements are positioned in the document from the top left, one after the other, in the order that they appear in the HTML. A floated element is laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible.

What if there is not enough space at the top of the pool for all these floats? In this instance the last float in the normal flow ie the last in the HTML is placed underneath the other floated elements. If they were been floated to the right for example this last element that couldn’t fit at the top now slots underneath but can now float all the way over to the right.

A Blue Swimming Pool Float
A Pink Swimming Pool Float
A Green Swimming Pool Float

Greeny is last in the normal flow. There is no room at the top so it is forced underneath.

Clearing up Clear

The behaviour above can be forced by using the CSS property ‘clear’. This effectively reset the float level so that the next element floated goes underneath the previously floated element. The ‘clear’ property takes three values ‘left’, ‘right’ and ‘both’ allowing to specify which float levels you are resetting.

If we appled a class as follows to our images:

.floatrightclr{
     float:right;
     clear:right;
}

The images will be all aligned the right-hand side.

A Blue Swimming Pool Float
A Pink Swimming Pool Float
A Green Swimming Pool Float

The order of the images is again down to their order in the HTML ie normal flow.

Tip: In many designer’s stylesheets you will find rules that clear left, right and both. Often these will be class selectors will sensible names such as ‘clearleft’

CodePen Demo

The overflow fix

A common scenario is to have floated elements placed within a container element such as a <div>. In the following HTML we have three images inside a <div>.

</pre>
<div id="container"><img alt="A Blue Swimming Pool Float" src="blue-float.jpg" />
<img alt="A Pink Swimming Pool Float" src="pink-float.jpg" />
<img alt="A Green Swimming Pool Float" src="green-float.jpg" /></div>
<pre>

Assuming all these images are floated to the ‘right’, it could look as follows:

A Blue Swimming Pool Float
A Pink Swimming Pool Float
A Green Swimming Pool Float

Note that the containers grey dashed line and pink background is not extended around the images.

This is because if a parent element has child elements floated then the parent will not be able to resize to accommodate the height of the child elements.

This can be fixed using overflow. Adding ‘overflow:auto’ to the “container” div makes it “self-clear”.

As a result “container” will extend as needed to contain its child elements.

Our CSS for “container” now appears:

#container{
	background-color:#FCF;
	overflow:auto;
}

With the result that:

A Blue Swimming Pool Float
A Pink Swimming Pool Float
A Green Swimming Pool Float