Get a free trial // Grow your CSS skills // Land your dream job

Almost there! – Fluid 3 column layout with header, sticky footer and full height columns

  • # July 5, 2013 at 6:20 am


    I’ve been trying to create a layout with the following features:

    • 3 fluid columns
    • Columns that are full height
    • A header
    • Sticky footer

    I’ve got this far and hit a wall:
    []( “Demo”)

    A refresh produces the correct layout in all cases but ideally this should happen on resizing too.

    Here’s the resizing bugs :

    1. Going from a tall window to a short window causes an unnecessary scrollbar.

    2. Going from a wide window to a thin window causes the content in the middle column to go under the footer.

    I’ve tried using


    instead of


    but that causes a whole bunch of new bugs.

    Any help is VERY MUCH appreciated!


    # July 5, 2013 at 9:45 am

    Here I’m pretty sure I worked out all those bugs a long time ago when I coded these. There are 5 ways to go about this type of layout here are all 5 ways to do it. Just replace number 1 through 5 in the link…

    # July 8, 2013 at 10:33 am

    Thanks very much Picnic. What a brilliant resource. I wish I had come across your site when I was trawling for answers.

    Anyway… I figured it out what was wrong with my jQuery. I needed to clear all the forced column heights before recalculating them when the window is resized.

    Here’s a link to a post about my solution:

    Thanks for the help.

Viewing 3 posts - 1 through 3 (of 3 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