Sayonara Faux Columns, Hello Flexbox

This article is outdated and no longer accurate. Find up-to-date information about flexbox at HTML5 Please.

Layout and Web Design go hand in hand like peanut butter and jelly. We can’t possibly have one without the other. It’s imperative we
have great layouts in order for our users to find and read the content we the authors/site owners deem as important. As we learned from Dan Cederholm, Faux Columns gave web designers a solution for floated columns to stretch to the bottom of their parent container. The technique involved the use of floated children within the container -either left or right-, a tiled background-image and overflow: hidden on the floated children’s parent container. This essentially made the columns equal in height and extended the parent container to the bottom behind these floated elements. It was a brilliant solution to a really simple problem, but alas the time has come to move on to something more promising and much simpler.

a really tasty combination
you just can't have one without the other
The CSS working group have been busy baking a module properly named “Flexbox” for the CSS3 specs. Although at the time of this article, Flexbox is still a working draft at the W3C. Even so, the possibilities are endless and certainly enough to spark your geeky CSS obsessions. Where we’re going, we don’t need floats. Flexbox now gives us the option to have our cake and eat it too.

I have put together a few live examples where you can see this new implementation put to use, but be warned it’s still bleeding edge. You will find Flexbox can –and will– be extremely useful in the game of markup layout. Also noted below are a few peculiarities I discovered between browser implementations.

Browser Support

http://caniuse.com/flexbox

Browser Differences

All test results are current as of

Webkit – CHROME.16, SAFARI 5.1.2 Mac OS 10.7.2
  • Widths for children elements aren’t needed in order to distribute evenly within the container with the property display: box.
  • The box-flex property accepts percentages as widths for children.
Gecko – FIREFOX 10 Mac OS 10.7.2
  • box-flex won’t accept percentages as a value –only accepts pixels or em’s.
  • The container with “display: box” needs an additional <div> surrounding itself in order to be centered within the viewport.
  • If you want the third column to stretch the remainder horizontally don’t specify a width.

Make sure to “view source” of the live examples with further notes on my results, implementation and links to extend your research on this topic. Let me know your findings by leaving me some feedback on your results. I’d love to hear from you the reader.

Live Examples

Dennis Gaebel

Design Technologist, fly fisherman and guitar shredder making stuff out of browser native technologies. Co-Pilot for Open Source projects like Typeplate (Smashing Magazine Feature) and the A11YProject. Helper Bee at CSS-Tricks and Happy blogger for Web Design Weekly. Owner at Gray Ghost Visuals. Say hi to me on Twitter.

Leave a Reply

Your email address will not be published. Required fields are marked *

show formatting examples
<pre class="language-[markup | sass | css | php | javascript | ruby | clike | bash]"><code>
…code example goes here…
</code></pre>

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Comment Preview

  1. John Doe shouted this comment preview:
    2012/02/12