Grow your CSS skills. Land your dream job.

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.

    -Spencer

    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

    Rob
    # 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.

*May or may not contain any actual "CSS" or "Tricks".