The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

3-Column Spanning Layout (all browsers)

  • # July 24, 2009 at 5:46 pm

    Demonstration of a layout that acts like a table for all browsers (FF, Webkit, IE6+). I haven’t seen one in awhile, and there doesn’t seem to be many around. The point of this layout is to allow for resizable columns when content is toggled. It includes your typical fixed side-columns (you can unfix them if you choose), while the center column keeps its business in the middle.


    EDIT: I messed around shortly after posting this and realized, while the layout would work in some conditions, it’s not going to work well enough to push as a working design. From the link below you can see that if the middle content doesn’t contain enough, it won’t span. Nothing beats using tables for this design (as far as simplistic designs go) albeit incorrect. The criteria was:

    • 3 Columns[/*:m]
    • The 2 outside columns could be toggled on/off (js) allowing center column to fill entire space[/*:m]
    • The 2 outside columns must be able to define their own widths[/*:m]
    • The center column must span the portion it is allowed (greedy & without content)[/*:m]
    • Must render correctly with all relevant engines: Gecko (Firefox), Webkit (Safari, Chrome), Trident (IE6+) [/*:m][/list:u]
      I just don’t see it being done without a mess of divs and css. Perhaps someone with better CSS can do it?

      – attachment
      + link

    # July 24, 2009 at 7:26 pm

    Thanks Spencer – I’m sure someone will find it helpful!

    Oh and its not about being cool, its about the hustle! :)

    Moved to Tips and Tricks ;)

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed