Jump to content
Sign in to follow this  
pillje

Fill container with bg-color

Recommended Posts

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;}

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...