How to clear a float

Say you have three divs, A, B & C.

Div A is a container for B & C and you would like B & C to sit side by side.

To get your divs B & C to sit side by side you need to float them, but as soon as you do that div A no longer expands to hold them. This is probably because you haven’t floated div A so the quickest fix is to float it.

However, there are many times you can’t do that – if you are using margin: 0 auto; on the container div, for example.

There are two further solutions:

1) Add overflow:auto; to the container div.

2) Add a clearing div after divs B & C.

Solution 1 can sometimes add scrollbars for reasons that aren’t immediately obvious. If that has happened to you try using solution 2.

Adding a clearing div is very easy. You simply add an empty div just before you close your container div (div A in this example) and set it to clear:both.

Couldn’t get much easier!