CSS Layout: An Alternative To Floated Elements

Floated elements were a giant leap towards the web layouts as know today and many developers still use them religiously. Floating elements were never a perfect solution, but it saved us from the dark days of using HTML tables to create columns and carried us through to the early grid systems and responsive designs.

Things are a little bit different now though – as we move into more complex responsive layouts  the shortcomings of floated elements are harder to ignore. Not least because there is an alternative method in display: inline-block that comes with a number of advantages to floated elements.

The problem with floats

I guess the first problem with floats is that they can be quite unpredictable unless you understand exactly how they behave. This causes a lot problems for CSS newbies and perhaps a touch of favouritism from coders who have taken the trouble to learn them inside out – but this isn’t one of my concerns with floating elements.

The real issue for me has always been that floats by nature lead to excess code in order to control their behaviour – especially when responsive design comes into play. The clearfix issue is a classic example and, although you can keep clearfix code to a minimum, unnecessary CSS is never a good thing – particularly when there is an alternative.

image to show the collapsing parent div of floated elements

Overview Of Display: inline-block

Inline-block is a display value that allows elements to display in the same line, but respects some important style values like margins and padding, width and height and vertical aligning. Basically this all adds up to a very useful display value when you want to align elements in a horizontal row such as a navigation menu or a column layout.

The main advantage over floats is that elements remain in the normal flow of the document. This removes the collapsing parent and clearfix issue, while you can still apply position values to the parents of inline-block elements, like text-align:center – which can save you setting widths and margin:auto to centre divs as well as content.

Inline-block in action

A good example of how inline-block trumps floated elements is your typical photography portfolio. Floats work quite well if all the images are the same height, but this is rarely the case with image grids and you quickly end up with a mess. This is because floated elements are removed from the flow of the document and rows are interrupted by the height of other elements.

floats-different-heights

Because inline-block keeps elements in the natural flow of the document, rows are displayed how you would expect them to and you can apply vertical-align to line up images from the top, bottom or middle.

inline-block-different-heights

Drawbacks to inline-block

There is no such thing as a perfect solution in this game and this is no exception. Using inline-block to create column or grid layouts has far fewer negatives than the float option, but its major drawback is that elements using this value render HTML whitespace. This means if you have a series of elements on different lines in your HTML, there will be a small space between these elements when you apply inline-block as their display value.

Most of the time this won’t cause you any problems, but if it does there are a number of workarounds and Chris Coyier has kindly put together a list of ways to remove unwanted whitespace – and floats just happen to be one of them.

images to show how the whitespace issue with inline-block

As with most CSS styles there is also the question of browser compatibility, but inline-block is widely supported – except for IE6 and IE7.

So when should I use floats?

The float property is designed to float elements around other elements – like text around images – and it still serves a purpose if you use it the way it was intended. And floats made it on to Chris Coyier’s list of whitespace solutions because they offer a genuine alternative if you can’t do without one. If using the float property is the best solution to your problem then you should absolutely use it – but it’s worth asking yourself if inline-block can to it quicker or better.

CSS3 will change things again

CSS3 layout promises to provide us with a more intuitive and extensive collection of layout controls – including the CSS Grid Layout Module, which is now starting to get browser support. You will have to wait a little longer to see widespread support for the new module, but you can expect a far more dynamic approach to layouts that helps you create adaptive grids by defining rows and columns.