CSS – Float, Clear and Overflow

Wednesday, March 12th, 2014
By Daniel Miller

Every website you’ll visit will feature at least one, probably all of the tags: float, clear and overflow. These three tags make our lives as developers that much easier. Why? Because all three can solve common layout tasks and problems; sometimes with just one line of code. For that reason it’s important to know when they can be utilised to save the developer writing excess code and so to build websites that work predictably on all browsers and devices.

Float in particular is widely used on all sites and is a key component in many layouts. It is also widely used on responsive sites and is supported by all browsers.

Real World Scenarios

Q: I have a logo, a login modal and some other containers that I want in the header. How do I position the logo left and the other containers on the right but all on the same row?

A: using float, we can add ‘float: left’ to our image, then ‘float: right’ to our other containers, making sure that the one that needs to be the farthest to the right is comes before the others in the HTML.

In our example below, the image container is floated left, and the other containers floated right:

Q: I have an image that is floated left. The the text copy is flowing around the image but I want it to start below the image?

A: All elements on a web page have a ‘display’ attribute, regardless of whether you specify it or not. Common attributes are: block, inline and inline-block. Each defines how the element will ‘flow’ in the document – a block level element will sit on its own row with subsequent items below, and inline elements will sit on the same line – perhaps alongside other inline elements. Images and anchor links by default are inline elements whereas paragraphs <p> and list elements <li> are block level elements.

Float is another display type of sorts (as are absolute and relative), in that it will take the object out of the block and inline ‘flow’, and will place it hard right or left against the block level item that contains it. Because we’ve taken the object out of the flow of the document, other items will wrap around it, or will even stack on top of the other element – regardless of whether they’re block level elements.

So when you float an element and take it out of the document flow, other elements, unless they’re floated and are too wide, will wrap around the element:

Note our paragraph wants to wrap around the logo. Sure, we could add some <br> elements or perhaps some margin to push the paragraph down, but what if our logo dimensions change? The last thing we want is an unsightly gap that varies between pages with different size logos.

The solution is to use the ‘clear’ tag, which allows you to clear an element of any floated elements.

Above we have used ‘clear: both’ to clear our text of the floated logo. N.B: You could just use ‘clear: left’ if you wanted to be more precise.

A curious case…

A common problem with floated elements is a ‘collapsing’ of the container element. This is because float takes the element out of the document flow making block level elements ‘ignore’ its presence. You could set the height of the container but this can be risky – what if the container’s content is dynamic and you only want to render the container to the height of its contents?

Below: our border has ‘collapsed’ because the two form columns are floated left:

Solution: by adding ‘overflow: hidden’ to our form element or our container, the browser seems to be able to get a handle on the form’s height and render the border appropriately:

Q: I have some content boxes that contain images uploaded by users. The containing element has a height and width setting, but I cannot guarantee the orientation or size of the photos the user will upload. I want to make sure all the boxes display uniformly and the images look crisp.

A: You could resize the image in the HTML and CSS, but some images with different dimensions and orientations might not scale well to your hard coded dimensions. In using percentages and overflow, we can scale proportionally and clip the image to fit in the container. Here’s how:

Assuming you have set the widths of your overall container elements, the first thing to do is create a container for your images with a width and a height based on the size you wish them to be – in our example below we used 100% width and a height of 164px. We then access the image class to set the width of the image to 100%.  By doing this we handle the resizing of the image over to the browser to render it at 100% of the width of our image container and not worry about the resultant height.

This is where the overflow tag comes in – by adding it to your image container, you can clip the amount of the image that goes beyond its height, i.e. hide the overflow.

Before clipping – boxes 1, 2, and 4 all size beyond our image container:

After, with overflow hidden applied, our boxes all displayed uniformly:

There are considerations to be made: just because you can clip the images doesn’t mean you should upload and request huge images from the server. If you do it’s likely they’ll be zoomed to such an extent that the image will no longer be legible. Worse still, your users might get frustrated with the load time if you run a graphically intensive site.

Overflow really comes into its own where you cannot guarantee the orientation and dimension of your images.