[rmagnuson]

Hey All,

I've got a style sheet that is giving me a problem. It's a rather standard layout with a width of 760px and auto margins to center it. Then I need the left column to be the main content and I need it to extend all the way down the page and rest on top of the footer. The right column is a nav column with various other ads and such under it - the problem is that the nav column is longer than the main column and so the main column doesn't extend all the way down the page as it is supposed to.

Here is the basic css:

#container
{
  width: 760px;
  margin-right:auto;
  margin-left:auto;
  background: #FFFFFF;
}

#logo
{ 
  width:100%; 
  padding-bottom:0px;
  padding-right:0;
  background:#ffffff;
}

#main
{
  background: #ffffff url("/office/mock/midblue.jpg") center repeat-y; 
  width:480px; 
  float:left;
  border-right: 1px solid #000000;
  margin-bottom:0px;
}

#sidebar
{
  background:#ffffff;
  width:254px;
  float:right;
  padding-right:12px;
  padding-top:12px;
  padding-bottom:12px;
  text-align:left;
}

#footer
{
  background: #F0F0F0;
  width:760px;
  border-top: 1px solid #000000;
  clear: both;
}

You'll notice there is a background is a repeating image in the main column - thats where the major part of the problem is - the image only extends down so far and then stops .. the right column is longer than the main column but the main column doesn't 'fill out' the rest of the page. What is wrong with this picture?

--- EDIT

Looks like I figured a way around the problem. Turns out if you do this:

#container
{
  width: 760px;
  margin-right:auto;
  margin-left:auto;
  background: #ffffff url("/office/mock/midblue.jpg") left repeat-y; 
}

It will fill the left column completely with the background image and thus create the illusion of having a full column even if there isn't content to fill it. And it appears to work in both IE and FF which is a plus.