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 5 of 5

Thread: footer hell

  1. #1
    New Coder
    Join Date
    Mar 2005
    Posts
    28
    Thanks
    0
    Thanked 0 Times in 0 Posts

    footer hell

    Trying to add a simple footer to a 2 column design based on Movable Type templates. No matter where I stick the div, I always get it at the bottom of the left column no matter how long the right column is. I've tried using clear: both, but no dice. If anyone has any suggestions, I'm all ears.

    http://www.spinandstir.com/archives.htm

  • #2
    Regular Coder
    Join Date
    May 2004
    Posts
    121
    Thanks
    0
    Thanked 0 Times in 0 Posts
    1. The column on the right is this one: <div id="beta">
    2. The body of your pages have a class of "layout_two_column_right"
    3. Now, when you go this CSS: /themes/theme-bonjour_chatette/theme-bonjour_chatette.css
    .. you'll see an absolute positioned #beta div..

    .layout-two-column-right #beta {
    width: 282px;
    display: block;
    position: absolute;
    float: none;
    right: 0;
    top: 0;
    }

    That is why your footer will always stay at the bottom of the content div.

  • #3
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,788
    Thanks
    8
    Thanked 131 Times in 129 Posts
    http://www.themaninblue.com/experiment/footerStickAlt/

    look at the 'footerStickALT' source and it should be what you need to make it work.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #4
    New Coder
    Join Date
    Mar 2005
    Posts
    28
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Span
    1. The column on the right is this one: <div id="beta">
    2. The body of your pages have a class of "layout_two_column_right"
    3. Now, when you go this CSS: /themes/theme-bonjour_chatette/theme-bonjour_chatette.css
    .. you'll see an absolute positioned #beta div..

    .layout-two-column-right #beta {
    width: 282px;
    display: block;
    position: absolute;
    float: none;
    right: 0;
    top: 0;
    }

    That is why your footer will always stay at the bottom of the content div.
    Do you know how to keep the column anchored to the top, but still allow the footer to be positioned underneath it? Changing the position to relative seemed to move it underneath the left column.

    Thanks for the help.

  • #5
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,788
    Thanks
    8
    Thanked 131 Times in 129 Posts
    you can try making #alpha float: left and #beta float: right. then your clearing div should function properly.

    you'll need to turn off all the (top: 0 right: 0 etc... on boths the alpha and beta)
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis


  •  

    Posting Permissions

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