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.
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
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.
- Widths for children elements aren’t needed in order to distribute evenly within the container with the property
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.
Comment Preview