Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Nov 2005
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS 100% height columns

    I need a method to create a three-column layout that will function along with this method of generating a moving footer:


    http://solardreamstudios.com/learn/css/footerstick/


    It needs to work cross-browser, and I'm stuck. Any thoughts?

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,788
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Is the page going to be fixed width or fluid? Are you going to want 100% height background colors on your columns or just borders dividing them? Do you have any sample code besides the footer stick method to work with? Maybe a picture? Have you tried using the source code of the footer stick example page and adding in a third column yet?
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    New Coder
    Join Date
    Nov 2005
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The page needs to be fluid, which is the difficulty. For whatever reason, I can't seem to get the right side to stop 208 pixels short of the right border and 174 pixels from the left. Also, the columns don't seem to want to stretch to 100% height. You'll notice the HTML and BODY CSS are both set to 100%, so that the footer works in and of itself.

    I'll get a picture of the original site and a workup of what its supposed to look like.

  • #4
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Here, see if this helps you visualize things:

    3-cols with sticky footer

    You'll have to add hacks and such to get it just right in Internet Explorer but you can see the basics of how something like this is set up.

    Hope this helps…


  •  

    Posting Permissions

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