SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    May 2006
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    3 columns, all 100% height, middle column scrolling with sticky footer

    Hi guys,

    My Googling and experimenting has me stumped. I'm well versed with usual CSS layouts but I'd be eager to know what is the best approach for this and I can't find anything to meet my requirements.

    I would like 3 columns, all 100% height of the browser window.

    The central column needs a sticky footer but with it's content vertically scrollable.

    I will probably need to scroll one or both of the other columns too but I'm sure that will be easy to add?

    I've tried to illustrate it here, I hope it helps! - http://mikeebee.com/other/3-column-layout.jpg

    Any direction will be appreciated

    Thanks
    Mike

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Did you mean something like this very old demo (over 10 years old) ?

    There are a lot of hacks in place for IE6 but they can be left out these days and a proper doctype used. The code needs a revamp but should give you a clue as how to go about it.

  3. #3
    SitePoint Addict
    Join Date
    May 2006
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul!

    Correct me if I'm wrong but your demo used faux-columns doesn't it? I need full height in all instances.

    I ended up adapting this example and it seems to be working great http://stevesanderson.github.io/fixe...o-columns.html

    Thanks for the input, really helpful in aiding my understanding

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi Mike,

    The layout of mine is actually more subtle than the one you linked to as the left and right columns are scrolled by the viewport scrollbar. The layout in your link is simply some absolutely placed divs and each column will get its own vertical scrollbar (note that if you have fixed width content in the right column of that example then it will be unreachable as the horizontal scrollbar has been removed ).

    You can make as many columns as you like just using top: xxpx and bottom: xxpx as long as you give each its own vertical scrollbar. I did loads of these examples about 10 years ago but they are full of hacks to make IE6 work.

    http://www.pmob.co.uk/temp/fixed-hea...r-left-new.htm
    http://www.pmob.co.uk/temp/toggle-2-100-columns2.htm

    If all you want is independent columns then simply place them absolutely using top and bottom and allow for room for the footer/header where needed (eg. top:100px bottom:100px). They however can end up looking ugly when all horizontal and vertical scrollbars click in.

  5. #5
    SitePoint Addict
    Join Date
    May 2006
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just needed independent columns with one having a sticky footer, I'm not sure why I found it so daunting. I've sorted it now and hopefully it'll be ok, ff not I'll be back on here to sap your brain some more

    Thanks!


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •