Please can you help me?! I'm tearing my hair out. All I want to do is make a simple 2 column layout with different colour backgrounds. The only problem is, one column has farmore content than the other, so the short column is cut off at the end of its content instead of the background colour extending all the way to the bottom of the page.

 

Here's my HTML code

 

<body>
<div id="container">
<div id="left">
not much content in here
</div>
<div id="right">
loads of content in here
</div>
</div>

 

And CSS

* { padding: 0; margin: 0; }

body {
background: #ffffff;
font-family: verdana, sans;
color:#000000;
}

#container {
width:950px;
background:#000000;
}

#left {
float:left;
width:300px;
background:#000000;
}

#right {
float:right;
width:650px;
background:#ffffff;
}

 

What am I doing wrong? I've looked at some tutorials and it looks like it should work Thanks

For a quick fix the trick is to use a background image in your container ID

For a quick fix the trick is to use a background image in your container ID

Thanks for the advice. I just tried it and it's not working... Does the image have to be as big as the column is likely to get?

You must use a method called Faux Columns to fix this.

You must use a method called Faux Columns to fix this.

Thank you!!!

Thank you. That was one of the thing i struggled the most with at a beginner stage of css. It's not really a beginner problem though, because it's not a normal way to do things.

 

Good luck.

If the background is simplay a repeating pattern you might need to make it repeat vertically

 

#container {
width:950px;
background:#000000 url(/bgimagename.gif) repeat-y;
}

Could you not just set the background to white, same as the shorter column?

You can do that If you are using a wrapper for your content and that you don't need diferent bakground-colors at the two divs inside. (left and right)

You can do that If you are using a wrapper for your content and that you don't need diferent bakground-colors at the two divs inside. (left and right)

 

Well, looking at the code above, the container would be the wrapper, right? The container background is set to black, which is the same as the left column, while the right column's background is white. The difference would only show if the right column is the shorter one, leaving everything under the right column as black ('cos it'd be showing the container background). By setting the container background as white as well, you wouldn't see where the right column stopped.

 

Or you could just leave the right column background as blank, so it'd just use the container background colour directly

or maybe you cshould try the correct CSS

 

background-color: #ffffff;

 

not

 

background: #fff;

 

also add something like

 

height: 100%;

 

then the colom with the little content will just increse automatically to fill the space. other than that is to have a background image for the body that repats the colour down the side.

 

there are a feu different ways to do this, finsd the way that suits you best.

or maybe you cshould try the correct CSS

 

background-color: #ffffff;

 

not

 

background: #fff;

 

also add something like

 

height: 100%;

It's funny - I didn't know that background-color is correct, the W3C CSS Validator did not show any errors in my CSS, even though I was using background:#fffffff.

 

I tried everything that's been suggested in this thread - having my container background the same as my shortest column, adding height:100% to the CSS, adding background images to the container div.

 

The only way I have managed to make the site look the way I want with the column colour extending the full length of the page has been to make a b/g image as suggested in Suno's post (Faux Columns) and add it to the CSS here:

body {
background-image:url(bk.gif);
background-repeat:repeat-y;
font-family: verdana, arial, sans;
color:#000000;
}

Adding it to the container div didn't work either - can't figure out why...

or maybe you cshould try the correct CSS

 

background-color: #ffffff;

 

not

 

background: #fff;

 

also add something like

 

height: 100%;

 

then the colom with the little content will just increse automatically to fill the space. other than that is to have a background image for the body that repats the colour down the side.

 

there are a feu different ways to do this, finsd the way that suits you best.

 

You know #fff and #ffffff are the same right?

 

And btw folks. There is a reason why someone came up with the Faux columns tecnique. What you tell him makes perfectly sense, exept it dosen't really work.

 

And notbanksy:

body {
  background: url('bk.gif') repeat-y white;
  font-family: verdana, arial, sans;
  color:#000000;
}

 

It's a bad habbit to write several lines of bg-styling, padding, (padding: 0 0 0 0;) margin (margin: 0 0 0 0;) or anything else when it's not required. Good luck.