The secret to designing website layouts without CSS floats

If you have been designing for the Web at all over the past decade you are undoubtedly familiar with the CSS float property. Since the industry (thankfully) adopted the principle of tableless layouts, floats have been the weapon of choice most of us use to lay out our web pages, but is it the best choice?

Despite the popularity of this method it is regularly the cause of frustration and confusion for new designers and becomes a problem when floated elements are left “uncleared”. These uncleared floats can cause multiple issues ranging from sloppy aesthetics to complete inaccessibility. With a small project it’s pretty simple to trouble shoot a float issue but when working on a large web app with dynamic content it can be a tad bit trickier, eating up precious time and costing you money.

 

A better alternative

Even when used correctly, floats change the normal flow of a document which can cause unexpected behavior and limit styling options. Since a float is not in the ‘normal flow’, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist. With responsive design, where sizes are dynamic and flowing to fill up available space, this is far from ideal. What if there was a better way?

Flexbox is the exciting future of web layouts but, for those of us that must support legacy browsers, this is still a far-off dream. The display property, on the other hand, has full support and can provide almost all the layout functionality of a float without the drawbacks.

 

inline-block to the rescue

The display property, in combination with float and position, determines the type of box or boxes that are generated for an element. In a very simple nutshell, block level elements span the entire width of their container forcing all subsequent elements to the next line while inline level elements only span the width of their contents, allowing any inline level element to flow up next to it on the same line.

Applying display: inline-block to an element generates an inline-level block container. Think of the text inside a tag. They are all ‘inline’ with one another while the tag itself is a block-level container. By understanding this behavior we can use the display property to inline our content next to each other. Since all of our elements remain in the normal flow, we have no issues with a collapsed parent element. In my opinion this is a much cleaner solution which still achieves the desired result.

See the Pen Inline-block over floats by davidicus on CodePen.

 

The technique

This method works just about anywhere you would normally apply the float. Let’s take a look at the classic main/sidebar layout. For the HTML we have a wrapper element with two child elements inside like so:

<div class="wrapper">  
        <div class="mainContent">
            <!-- Main content goes here -->
        </div><!-- No Spaces   
     --><div class="sideBar">
            <!-- Sidebar content goes here -->
        </div>  
    </div>

Our CSS:

        .wrapper,
        .mainContent,
        .sideBar { 
            //change the box model for simplicity
            -webkit-box-sizing: border-box;
               -moz-box-sizing: border-box;
                    box-sizing: border-box;
        }
        
        .wrapper {
            font-size: 1em;
            padding: 1.5em;
            width: 100%;
        }
        
        .mainContent,
        .sideBar {
            display: inline-block;
            vertical-align: top;
            width: 100%;
        }
        
        @media (min-width: 700px) {
        
            .mainContent {
                margin-right: 5%;
                width: 60%;
            }
        
            .sideBar { width: 35%; }
        }

Just like that we have the main content and side bar laid out.

The direction of the “float” is determined by the text alignment of the wrapper div. Since default alignment is left we didn’t have to do anything. However, you could easily set it to center or right to achieve some layouts that are not even possible with floats (more on that later). Notice the “no spaces” comment placed in between the two child divs of the .wrapper container. This is important to note, and the reason for doing it is the one “con” about this method.

 

White space

Let’s go back to the tag example. When writing text in html all white space is wrapped into one single white space character regardless of the amount of spaces you have in your HTML document. So, any gaps you have between your “floated” elements in the markup will actually register as a space between them in the browser, just like our paragraph text. This will naturally cause your size calculations to be off knocking the last element down to the next level of the page. No bueno! Luckily for us there are several solutions to fix this little issue. Such as:

  • Set font-size: 0;. The space that we are dealing with is a character space so setting the font-size to zero makes the size of the space zero as well. The issue with this is that you must bump the font sizes of the child elements back up and any ‘em’ sizing goes completely out the window. This could get a bit cumbersome to keep on top of, so this way is not ideal.
  • Remove the space between your elements in your HTML, thereby removing the space from the equation. I did this for a while but it just looked sloppy and made it more difficult to read.

  • Adding an HTML comment between your elements will also remove the space character as it did in our example. This is my preferred solution. The text highlighting in most text editors is such that the contrast between the note and the elements are enough to significantly improve the readability of your mark up. This will also allow you to keep the proper indentation of the actual element itself.

 

Floats work for me, why change?

You may be thinking, “This is good and all but why would I change a method that works just fine for me?” Well, even if you are a float master there are certain things that they just can’t do. For instance:

  • The elusive “centered float”, which is oft-times desirable, requires additional markup and multiple CSS properties to achieve. With the display method this is simply done by applyingtext-align: center to the wrapper.

  • The biggest advantage of choosing the display method is the ability to vertically align your content. How often have you wanted to center an element to its sibling? You could use positioning with the negative margin/translate trick but, again, with a responsive, dynamic environment this is not preferable. Instead applying vertical-align: middle; will perfectly center your elements every time with no extra work on your part. (See the Pen Inline-block over floats by davidicus on CodePen.)

 

To wrap it up

In reality there is no “one size fits all” when it comes to web design and it really boils down to personal preference. I still use floats in certain situations and sometimes it really is the best tool for the job. I do, however feel there is a definite advantage to using the display method. From my experience, I have found it to be the best, least error prone method for dealing with layouts. For those of you that would like to explore this method more, I have created a “Just Say No To Floats” grid: Inline-block Grid with SASS on CodePen.

Featured image/thumbnail, collapsed wall via Chris Cotterman

0 shares
  • http://www.bibbledesign.com Bibble Studio

    I haven’t considered this but looks interesting!

  • Dominic Leonard

    I love display: inline-block it has been rocking my world for a year now. :D

  • Nicolas Hoffmann

    You might also use CSS table-layout : it is well supported since IE8 and doesn’t break the flow, it works well with RTL websites. :)

  • http://www.martinspierings.nl Martin Spierings

    Inlineblock seems like a nice solution but you should definitely go flexbox. Most legacy browsers can handle the box model (predecessor of the flexbox) so you can go a long way. For most new projects flexbox is supported on enough browsers. IE9 and up or Android 2.3 and up for example. It provides a good deal of handy features which you won’t get with this inline-block example. You cannot get 100% height correctly or add proper scrolling inside blocks that are inline. Also positioning elements inside the flexbox is way easier. And to top it off: its much clearer how everything is positioned in the dom.

  • http://tornography.com Manuel Schulz

    I tried myself, using inline-blocks to accomplish a grid. The problem here is the “comment hack” to prevent the margin of these inline blocks. Well, there is no problem if you have full control of the amount of boxes, but if there is, let’s say, a shop with a grid of products, the comments need to be set between them.

    Also there is this “.last” class. How could you know, the third one is always the last one? what if you decide to display four blocks in a row on wider screens. Here I prefer the way the “b” framework (don’t call the name ;-) ) handles that:

    Add half the margin to both sides of the block, and pull the row outside by half of the margin to the left and right. This way one has not to think about which block is the last one.

    But, to get to the point, I really like the idea of not using floats.

  • matt

    10 years ago “don’t use tables it’s bad!”
    present day “don’t use floats it’s bad!”
    10 years later with CSS4 around or something “don’t use inline-block it’s bad! use this new hippie-solution instead!”

    Seriously people is it that hard to include clear: both;? Floating passes the validation and is supported in all browsers, “uhh, but it’s not working float:right; on my 5yr old ie8″ – that’s because you’re a hippie.

    • Laura Montgomery

      The web community have been using floats in a way in which they were never meant to be. Inline-block, although not perfect, does exactly the job it was made for.

  • http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

    I think the problem is that, just like tables, floats weren’t intended for layout. Consequently, they do tend to fall down if you ask them to do anything challenging.

    I’ve found that using display:inline-block in combination with box-sizing:border-box is the most reliable method.

    Flexbox is great but lacks sufficient support to be used for anything but progressive enhancement.

    The Grid layout module is probably the ultimate solution, but support is worse than for Flexbox.

    • Laura Montgomery

      Inline-block with box-sizing:border-box is how I work too. Definitely the best way I’ve found so far.

  • http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

    It depends on what you mean by reliable. Tables are semantically incorrect and force data out of context for the purposes of style, so they are superficially reliable but fundamentally broken (for layout).

    The most reliable layout method is a single column using browser defaults. Which is why so many people send plain text email.

  • Matze

    For everybody who want to dig a little bit deeper there is a good thread on stack overflow about that http://stackoverflow.com/questions/11805352/floatleft-vs-displayinline-vs-displayinline-block-vs-displaytable-cell

  • JW

    Isn’t this just another “trick” to make CSS function like a 1990’s html structure?

    • Davidicus

      Floats are still very common. This is not a trick but an alternative method for creating your layouts. That being said, both methods are really just a hack as they were originally intended to layout documents not complex layouts. As web designers we take advantage of their behavior in order to do these layouts but it is not ideal. It will be nice when we can finally use a property that was implemented specifically for layout.

  • ConstantStrategies

    Thanks for the tip. I’ll look into it.

  • Daniele Pavinato

    Very interesting! Cool

  • http://webplatformdaily.org Šime Vidas

    I don’t think that Flexbox is a “far-off dream”. The unsupporting browsers (IE8 and IE9) can gracefully degrade to the singe-column mobile layout. It doesn’t make sense to hold off of Flexbox for these two browsers.

    • Davidicus

      Unfortunately, my company requires us to fully support some legacy browsers, meaning they don’t want to hear all that. lol, I am totally with you but for the moment I am forced to make these browsers look pretty close to one another. Each site’s analytics will really dictate which browsers should be supported. It is getting close, just not there yet.

  • Davidicus

    display: table-cell has its uses but brings about a bunch of table related issues along with it. For my day to day i think inline-block works the best. But again, all different scenarios require different solutions and everybody has their preferences. I have been using table and table-cell to center content in the browser window when it is large enough. It is fun to play around with and try different things.

  • Davidicus

    This display:inline-block method can do a lot of the layouts that floats can. Maybe play around as an alternative if you are interested. If you work solo and have a grasp on floats I can totally see why you don’t see a reason to change.

    • http://www.themesrefinery.com/ Themesrefinery

      Thanks for you kind suggestions.

    • http://www.themesrefinery.com/ Rehman Ali

      thanks buddy.

  • http://www.letsnurture.co.uk/ ilesh Raval

    i think this post will help every designer a lot… i will sure try to implement your idea in my designs for sure

    • Davidicus

      I appreciate the comment. Always good to experiment.

    • Davidicus

      I appreciate the comment. Always good to experiment.

  • Daniel Smith

    I would strongly advise using the display property. I used to use floats for everything, but there comes a point where we have to use the correct method of developing HTML and CSS templates. Developers unfamiliar with it, should look up ‘clearfix’. This will ensure the box model works correctly, with internal floating elements. I have never once needed to use flexbox because when using HTML and CSS correctly, you wont need it.

    • Davidicus

      You can hammer a nail in with your shoe but I would rather use a hammer…Every person is entitled to his or her personal preference but float definitely has its limitations. Flexbox is worth looking into if you haven’t already.

  • Daniel Smith

    Floats should be used when you need to float something to the left or right. The property name is a giveaway. Use display: block with the clearfix solution for all containers.

    • Davidicus

      Using inline-block as an alternative is a preventative measure when working with a large team. I also believe there are many more benefits with inline-block as I try to illustrate in the article. Float definitely still has its place and I still use it when appropriate.

      • Daniel Smith

        Inline-block is good if you want a block that doesn’t span the width of its containing element. Otherwise, you should use display:block. This is very useful when building responsive sites.

  • Daniel Smith

    Tables should only be used for tabular-data. Any developer, with an ounce of experience should know that. Use display block on any container and use floats for any element that needs to be positioned to the left or right. Fairly straightforward stuff.

  • Robert F.

    I’m new to CSS so my observations will probably seem rather obvious to the rest of you but, first of all, the widths of the main content, gutter, and sidebar must add up to 100% or less. If you’re trying to implement this technique and you already have additional margins such that the width of the page will exceed 100%, the two divs will stack vertically. You must take any pre-existing margins/padding into account when you figure out your percentages. Also, you literally have to have the comment in your code as shown or the technique won’t work. You can’t just ensure that there are no spaces after the first ending div’s final bracket. Again, I’m new to CSS so you’ll have to pardon me if these things seem self-evident. They took me awhile to figure out.

  • Davidicus

    Thanks!

  • Kyran Mckeefery

    I have to support IE7 how do you think I feel! Haha.

  • tacone

    Beware: in webkit at least, inline-blocks are treated as images when it comes to printing. That means the browser will try no to page-break inside the block when it can. https://github.com/ariya/phantomjs/issues/10638#issuecomment-20186253
    Depending on your needs, this behaviour may be desiderable or not.