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.

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 February 12^th, 2012

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

• The Cederholm Faux Column
• The Cederholm Faux Column with a Marcotte Twist
• The New CSS3 Flex Box
• MDN documentation box-align example
• https://developer.mozilla.org/en/CSS/box-align

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

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