Align bottom in float-based CSS column layout

Some things are easier to do with tables than CSS, but there’s always a way to get it done. Here’s how to bottom align a section in a float-based columns context.

Given the following markup, we might be told to have #main and #sidebar side by side and the #contact section appear in the sidebar but all the way down.

<div id="content">
<div id="main">
Body text
</div>
<div id="sidebar">
<div id="nav">
Navigation UL
</div>
<div id="contact">
Contact info
</div>
</div>
</div>

First, for our #main and #sidebar divs to stand by side by side, we can simply float them:

#main {
float: left;
width: 62%;
}
#sidebar {
float: right;
width: 36%;
}

The trick is now to create a positioning context of #content div in which we can position #contact absolutely.

#content {
position: relative;
}
#contact {
position: absolute;
bottom: 0;
right: 0;
}

The problem, for now, is that being floated or absolutely positioned, #main and #sidebar don’t take up any space in #content, which is therefore as flat as can be. We’ll need to add something inside #content that will clear floats, either through CSS (using content) or in HTML (because IE doesn’t support generated content). Change your markup to:

<div id="content">
<div id="main">
Body text
</div>
<div id="sidebar">
<div id="nav">
Navigation UL
</div>
<div id="contact">
Contact info
</div>
</div>
<div class="clearall"></div>
</div>

This should work for most modern browsers, however IE’s CSS implementation is a mess and the floats used in this situation can trigger the peekaboo bug. To avoid this, giving hasLayout to #content solves the problem because it gives it the ability to properly hold its floats. Since this is only needed for IE, this declaration should be hidden using the Holly Hack:

* html #content {
height: 1%;
}

Giving #content a height won’t hide its contents because IE will (incorrectly, according to the spec) expand it to fit whatever is inside.

That’s it! View source on the demo I set up for all the CSS that is needed. Tested and approved on Firefox, Opera and IE (5 to 7).

Update (July 9th, 2008)

In reply to Petr’s comment, I’ve added another demo where the sidebar items should not overlap. This is achieved by adding a margin-bottom to #sidebar that’s equal to the maximum height of the bottom item. Tested and rendering correctly in IE 5 to 7, Firefox

17 réflexions au sujet de « Align bottom in float-based CSS column layout »

  1. Thanks a lot! Was trying to fix my layout with vertical-align with no luck. Your approach fixed my issue.

  2. @jake: The link had disappeared during the blog engine upgrade. It’s been fixed, thanks for letting me know about it!

  3. This is a great technique! My question is how do you keep the sidebar from overlapping each other when the content height is less than the combined height of the two sidebar elements. Especially when the height of the sidebar elements can vary from page to page?

  4. @petr: Unfortunately since we’re using absolute positioning the top part of the sidebar is completely unaware of the space required by the bottom half. If we know the maximum amount of space required by the bottom half, we can make room for it by adding to the sidebar a margin-bottom of the required amount of pixels.

    For instance, if the bottom half is 100px high at the maximum, set

    #sidebar {
    float: right;
    width: 36%;
    margin-bottom: 100px;
    }

    Of course you can also use relative units (ems and percents) to make sure the bottom space reserved always fits the height of the text.

    Thanks for pointing this out, I’ve added a second demo with this setup.

  5. This doesn’t work in firefox, and most likely not in safari, google chrome, or others.

  6. Merci beaucoup,
    Enfin une méthode simple et souple pour aligner des blocs comme on veut à l’intérieur d’autre blocs.
    Grâce à vous, je vais pouvoir éliminer définitivement tous ces horribles tableaux qui me donnent de l’urticaire.

  7. @CarlS: Right, I fixed that. Seems to happen everytime the path to the public folder changes (which happened recently).

  8. Dites merci très beaucoup monsieur! This was just the solution — and so easily documented.

  9. Thanks for posting the article.

    I’ve been trying a create a layout as is described here and using float left and right worked fine, but to align a full width div underneath these two has been giving me real problems.

    This has worked great! :)

    Merci beaucoup!

  10. On en revient toujours à ce maudit IE où il faut placer un hack
    * html #content {
    height: 1%;
    }
    Merci du partage ;)

Les commentaires sont fermés.