CSS Layouts: The Best of the Worst?

Nov 09, 2011
Diego Vergara

Here at Oshyn it's a given that we use CSS for layout, after all, the divs vs. tables debate was decided (in my mind) long ago and I'm not going to dredge it back up here.  But lately I've noticed increasing chatter about the inadequacy of CSS 2.0 as a layout system, starting with this post from the CSS guru himself, Eric Meyer, back in February.  CSS grid frameworks are springing up like weeds, and just today I read an article linked from CSSGlobe proposing using a JQuery plugin to force the proposed CSS3 Template Layout Module.


Call me a standards purist, but a Javascript-based solution is a non-starter for me and I'm not holding my breath for CSS3 (nor have I been able to wrap my brain around the module proposal as currently written).  I haven't been a big fan of the grid frameworks out there either so far because a) they go against semantic naming and seem to introduce some superfluous markup, and b) I really believe that gridding begins in design and if the designer hasn't explicitly defined the grid and given it to the developer you just end up shoehorning one into the site with varying degrees of success.


So for now I remain in the camp that every page is unique and there's no substitute for a savvy UI developer puzzling out the right combination of floats and positions from scratch.  It's worked pretty well for me so far, and when it hasn't it's usually the browser's bugginess (*cough*IE6*cough), not the fault of the CSS, per say. 


That said, when the collective industry evolves to a cleaner, more intuitive, more efficient layout system, here's my wish list:

  • Clearing floats more easily.  Shouldn't the default expected behavior be for a container to contain its child elements?  Overflow properties and clearing divs or breaks seem like silly hoops to jump through.
  • Vertical centering.  This is the one behavior that makes me yearn for the table days.  Whether it's vertical-align or margin: auto on top and bottom I don't care!  I just know I want it!
  • Relative heights. In the past some browsers treated the height property as dictated by the element's content, while others treated the height property as dictated by the element's parent container.  Why not make each of these an explicit option and let us have both to use when appropriate?

How about you?  Is doing layouts with floats and positioning that much of a burden?  What do you think of grid frameworks and some of these other proposals?