...

View Full Version : CSS creates white space at foot of site



Cremator
02-11-2012, 08:04 PM
CSS, whilst I am OK with most of it, when it comes to some things, I am left wondering what needs to be modified.

Without posting allot of code, looking at the structure below, how can I make the last div called footer sit at the very bottom of the page leaving zero white space between it and the bottom of the browser?

In a nutshell, my friends website has been worked on by a developer, all they seemed to have done is mess around with the CSS, add some CSS and remarked other bits out.

When the page is viewed in full screen mode (F11) the page has an ugly white space at the bottom where none should exist.

The skeleton below is to help visualize the main structure to the Divs.


<body>
<div id='container'>
<div id='head'> some stuff like banner and the sites ears </div>
<div id='content'> the body of the display </div>
<div id='footer'> closures, links and legal stuff</div>
</div>
</body>

The style sheet show settings of
#container{
width: 100%;
color: #000;
margin: 0 auto;
padding: 0;
font-size: 1.3em;
}

#header {
margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;
background: url(images/testsite/headerbg_2.jpg) no-repeat top center;
height:205px;
}

#content{
margin:-15px auto 0 auto;
width:910px;
color: #000;
padding-left: 5px;
padding-right: 5px;
padding-bottom:0px;
padding-top:0px;
}


#footer{
padding: 1em 1em 13px;
background: url(uploads/images/bg_footer2.gif) 0 -8px repeat-x;
color: #666;
font-size: .9em;
clear: both;
margin: 0 auto;
border-top: 1px solid #CCC;
overflow: hidden;
min-height:100px;
}
* html #footer{height:1%}


The item in bold are what I feel is the root of the problem, the CSS leaves a good 1 inch of white space when the page is in full screen mode but a minimal slither when in browser standard mode and as far as I can make out, the page is not meant to have either, its supposed to spread out across the whole of the screen when in F11 mode and likewise, fit to the window under standard mode.

Any ideas on where to start carving?

Excavator
02-11-2012, 08:16 PM
Hello Cremator,
This will put your footer at the bottom -
#footer{
padding: 1em 1em 13px;
background: #f00 url(uploads/images/bg_footer2.gif) 0 -8px repeat-x;
color: #666;
font-size: .9em;
border-top: 1px solid #CCC;
width: 100%;
height:100px;
position: absolute;
left: 0;
bottom: 0;
}

For more on full height layouts, look at this example (http://nopeople.com/CSS%20tips/full-height-layout/index.html).

Cremator
02-12-2012, 01:22 AM
Thanks, I will pass that info on, see what happens.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum