View Full Version : Problem with a FIXED div overlapping others when screen resizes

05-08-2008, 11:49 PM

I'm building this site: corknj.com (http://www.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.


05-09-2008, 01:13 AM
you need min-height it looks like.

wrap the whole site in a wrapper div

#wrapper {
min-height: 640px; /* seems about right */

IE6 doesn't understand so a conditional comment

<!--[if lte IE 6]>
<style type="text/css" media="screen">
#wrapper {
height: 640px; /* silly IE6 confusing height and min-height ;) */