Fill container with bg-color

[pillje]

Hi,I'm making a web site for a friend and I'm having a problem. Basically I have a site that is divided in two columns. The problem is when one of the columns gets more content then the other. When that happens the column with less content gets a big hole, instead of filling up with the background-color. I have tried to Google the problem without finding a solution. You can see my CSS code under, and the page is here: http://pillje.latestdot.nu/

#mainContainer {margin:0 auto;padding:0;width:900px;min-height:500px;height:auto;border:10px groove #CCCCCC;}

Left colum

#columnOne {float:left;margin:0;padding:0 5px 10px 5px;width:680px;min-height:500px;height:auto;background-color:#eeeeee;background-repeat:repeat;}

Right column

#columnTwo{float:left;margin:0;padding:0 5px 10px 5px;width:200px;min-height:500px;height:auto;background-color:#cccccc;background-repeat:repeat;}

[Ingolme]

There's no specific perfect way to do it.You could give both boxes a fixed height, or you could put the longer box inside the smaller one. Depending on your design, you could give the wrapper the same background as the smaller box so it fills up the rest of the empty space.

[cousineaug]

Hi,I'm making a web site for a friend and I'm having a problem. Basically I have a site that is divided in two columns. The problem is when one of the columns gets more content then the other. When that happens the column with less content gets a big hole, instead of filling up with the background-color. I have tried to Google the problem without finding a solution. You can see my CSS code under, and the page is here: http://pillje.latestdot.nu/

Another way to do it is to surround left and right inside another div each with the colour and set the outer div height to 100% with the colour. example below not tested cuz I'm running around today.

<div style="height:100% background-color: #eeeeee;"><div class="leftside">content goes here</div></div><div style="height:100% background-color: #cccccc;"><div class="rightside">content goes here</div></div>

this way whether left or right is longer the background colour goes tot he bottom of each column. There is something I recall about this solution that if the page is less than ONE SCREEN in height, you will get blank with colour at the bottom of the screen.Guy

[pillje]

Thank you for your answers. Couldn't make it work, so I just put the height to be 1100px manually. Not the best solution, but it will have to work.