1

I'm having a little trouble here. Designing a website where I wanted two equally-spaced bars on either side with an accent color, and the content in the center is in a 800px wide box with a white background. Basically, three columns with different colors. To do this I created a content div with margin-align:auto for left and right.

#container
{
    height:500px;
    width:800px;
    background-color:#FFFFFF;
    margin-left:auto;
    margin-right:auto;
}

So the problem I'm having is my content box is flush with the top of the browser window, but if the screen resolution is significantly high there's an empty space leftover from my content blocks not taking up enough space and the accent color shows below my content box. What would I have to do to make the content adjust itself to take up more space so this doesn't show through at the bottom?

Edit: try this https://i.stack.imgur.com/DuNXJ.jpg

Edit 2: Solved! Thanks to Blender, the link provided in comments to cssstickyfooter.com did the trick.

Here's the completed correct code, for anyone who stumbles across this and is interested.

Bojangles
  • 99,427
  • 50
  • 170
  • 208
MDWar
  • 103
  • 13
  • With a live demo it's easier to work with your site. Could you give us one? – Blender Jan 03 '12 at 23:21
  • It's just code right now unless there's some site I could upload it to. I have a screen shot I took, but this site won't let me upload until I have some minimum amount of reputation points... – MDWar Jan 03 '12 at 23:32
  • Best demo site ever: http://jsfiddle.net/ – Blender Jan 03 '12 at 23:41
  • Oh, that's fancy. http://jsfiddle.net/WGSXf/ P.S. sorry for sloppy coding, I think I have a bunch of extra stuff in there while I try out different edits to get it to work... – MDWar Jan 03 '12 at 23:47
  • Your `#container` element has a fixed height. It won't expand. – Blender Jan 03 '12 at 23:51
  • But when I set the height to 100% it shrinks to nothing (because I don't have any content in there). I think a more accurate description of what I'm trying to do is having #bottombar fixed to the bottom-center of the screen, and making #container scale it's height as necessary. – MDWar Jan 03 '12 at 23:53
  • Google **css sticky footer** and use the code you find. – Blender Jan 03 '12 at 23:55

1 Answers1

0

Perhaps you should take a look at this: https://stackoverflow.com/a/8289963/1068386, think it might help you. A screenshot and more code would be helpfull in each case.

Community
  • 1
  • 1
canihavesomecoffee
  • 163
  • 4
  • 19