...

View Full Version : Footer Issues



sophshep
02-11-2011, 09:12 PM
Hi All,

I am having some (a lot!) of trouble with getting my footer how I want it. Here is a link: sophieshepherd.com/curt

What I want is for it to be flush against the bottom of the page. Not necessarily a sticky footer, because I think I'll have enough content on each of the pages to keep it down there.

Anyway, as it is now, if you reduce the size of the browser window, it floats up. I do not want that. I do want it to slightly overlap with the two Divs above it, and I also want it to 100% of the page width, which is why it is outside of my 960px container.

Thanks everyone!!

sunfighter
02-12-2011, 12:24 AM
Just a guess - try putting the footer inside of your container. Move the </div> <!--end container--> down past the last </div> tag and see what that does.

sophshep
02-12-2011, 12:29 AM
Just a guess - try putting the footer inside of your container. Move the </div> <!--end container--> down past the last </div> tag and see what that does.
Hi Sunfighter,

The problem with that is that the container is 960px wide, and I want the footer to be 100% of the browser window (though the content in the footer will be 960 wide).

When I do put the footer div in the container however, the same problems remain. The only difference is that the footer gets a fixed width.

sunfighter
02-12-2011, 12:59 AM
OK I just down loaded your css file change this and it looks good on my computer
#main{
width: 660px;
margin: 80px 0px 0px 300px;
background: #FFFFFF;
/*float: right;*/
/*position:absolute;*/
padding: 0px 0px 100px 0px;
border-right: solid 10px #1b334a;
z-index: 1;

}

No need to float the main nor position. It will go where it's suppose to naturally.
Not sure if you need to clear the footer either.

Excavator
02-12-2011, 04:29 AM
Hello sophshep,
Try making your CSS look like this -
#container{
width: 960px;
margin: 0px auto;
min-height: 100%;
overflow: auto;
/*height:100%*/
}
#main{
width: 660px;
margin: 80px 0px 0px 300px;
background: #FFFFFF;
float: right;
position:absolute;
/*padding: 0px 0px 100px 0px;*/
padding: 0;
border-right: solid 10px #1b334a;
z-index: 1;

}
#sidebar {
width: 300px;
/*height: 100%;*/
position: relative;
bottom: 0px;
margin: 0px 5px;
padding: 0px 0px 100px;
float:left;
background:url(../images/bg_side.png) repeat #1f3f5f;
-moz-box-shadow: 0px 0px 9px #000;
-webkit-box-shadow: 0px 0px 9px #000;
box-shadow: 0px 0px 9px #000;
z-index:2;

}

overflow: auto; clears the floats so #main can enclose it's contents. See this explanation on how overflow: auto; clears your floats (http://www.quirksmode.org/css/clearing.html).

Removing the height on the other elements lets them expand naturally as well. height: 100%; doesn't usually do what new coders want it to do anyway.

sophshep
02-12-2011, 02:58 PM
Thank you so much excavator, that seems to have done the trick! No more height: 100% for me anymore!!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum