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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problem with a FIXED div overlapping others when screen resizes

    Hi,

    I'm building this site: corknj.com (go past the index page to see what i'm talking about) and i want the footer to be fixed at the bottom of the screen. However, when people with smaller screens look at the site, the footer disappears behind my floating yellow box. It used to overlap it but I changed the z-index of the box so now the footer goes behind it.

    Still, i need a solution where the footer will be at the bottom of any browser and will adjust with it like it does now. However, if the browser is too small, the footer should stop at the bottom of the yellow box and not go further up even if that means people have to scroll to see it.

    I tried all kinds of things with CSS, and then when that did not work, I even tried a table. I removed the fixed value from the footer div and set the table up with 3 rows where the top row contained my yellow box, the middle row was empty and set to height 100%, and the bottom row contained the footer. This usually works very well in banners when you want an image to the left and to the right but you want the banner to expend with the browser. But I guess it does not work for heights.

    Any ideas would be greatly appreciated.

    Thanks,
    eve
    Last edited by ivelina; 05-08-2008 at 10:51 PM.

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    you need min-height it looks like.

    wrap the whole site in a wrapper div
    Code:
    #wrapper {
    min-height: 640px; /* seems about right */
    }
    IE6 doesn't understand so a conditional comment
    Code:
    <!--[if lte IE 6]>
    <style type="text/css" media="screen">
    #wrapper {
    height: 640px; /* silly IE6 confusing height and min-height ;) */
    }
    </style>
    <![endif]-->
    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
    •