This question is pretty specific.

I centered all of the pages in this site today, and made the body extend all the way to the bottom of the browser. But, this one page doesn't use my main style sheet; most of the styling is embedded in the page.

Trouble is, the white body doesn't even extend to the last bit of type. I tried adding a "height: 100% to the html and body tags, but still no luck. No luck making a float: clear both div at the end either.

I'm putting the URL to the page below.

Thank you!!!!

6 answers

1
point
This was chosen as the best answer

The problem is that your maincontent div has a relative position, shifted down. This causes it to extend below the body (which doesn't stretch), and the background-color is on the body.

The simple solution would be to put the background-color of maincontent to white. You'd still need to tinker a bit since it isn't wide enough to cover everything.

But I would suggest to review your code, since shifting your main container down using relative positioning seems like a very bad idea. Try reaching your goal through margin or padding instead, and you'll have less issues.

Answered over 6 years ago by Joeri Hendrickx
1
point

I see no background color declaration for #mainContent. Try setting that to white. Firebug previewed it white all to the bottom for me in Firefox, but I can't vouche if other browsers see it that way as well.

Answered over 6 years ago by campuscodi
Tony B 86
1
point

You can try using faux columns for the effect you are looking for. If you are using photoshop just make a new file with the width of your content column and fill it with white. Then expand the canvas like 10 pixels on either side, create a new layer below the white layer and fill it with the gray. Change the canvas size to 1 pixel tall and keep the width the same. Save for web as a gif and then make your css like this for the body:

background:#ccc url(images/backgroundimage.gif) 0 0 repeat-y;

This will tile your background vertically all the way down the page no matter how tall the window. If you need a more in-depth tutorial look up faux columns on A List Apart or just google it.

Answered over 6 years ago by Tony B
0
points

Thanks, guys! All three are very good solutions. I am going to go back and try to clean up the code; I had no idea that shifting down a relative position could cause it to extend below the body.

Answered over 6 years ago by Bob Faulkner
0
points

Well, I couldn't do it. I tried everything, but I guess that page is written so badly and my knowledge of CSS is worse than I thought. I did succeed in a work-around, though. I made a page wrapper and set the width to that of the page, the color to white, and the height at a defined pixel dimension, 1200 px or so. I know that is not a very good way to do it. Anyway, I re-posted the page, in case anyone has any other comments. Thank you!

Answered over 6 years ago by Bob Faulkner
0
points

Bob, I just loaded up the page and noticed that your #mainContent CSS rule is defined like this:

#mainContent {
  background-color:#FFFFFF;
  margin:5em 0 auto;
  padding:0 238px;
  width:504px;
}

The margin here is the key. The shorthand rules you've set there tell it to "put a 5em margin on top and bottom, and automatically find an appropriate left and right margin".

Changing the margin definition to margin: 5em 0 auto; should solve the problem of the container not reaching the bottom. This shorthand rule says to apply the 5em margin to the top, no margin of any kind to the bottom, and maintain the "auto" margins on right and left.

For an explanation of how "CSS Shorthand" rules work, ask here or "google around".

Answered over 6 years ago by anonymous coward