Help with basic html layout please

[andrew_biggart]

Ok so basically I am having a little bit of trouble with my layout template.

 

I have a container div which contain's a left column div and a page content div.

 

#container {
max-width: 952px;
height:100%;
background-image:url('images/container-bg.png');
background-repeat:repeat-x;
margin-top:30px;
}

#left_col {
width:316px;
height:812px;
float:left;
}
#left_column_top {
width:316px;
height:12px;
background-image:url('images/left-col-top-bg.png');
position:relative;
}

#left_column_bottom {
width:300px;
min-height:720px;
height:100%;
background-color:#bfbfbf;

position:relative;
padding-left:8px;
padding-right:8px;
padding-top:40px;
padding-bottom:40px;

}
#page_content {
width:604px;
min-height:780px;
height:100%;
float:right;
background-color:white;
border:1px #606060 solid;
margin-bottom:9px;
padding:10px;
}

 

The problem: I would like to solve is that when ever my page content div expands in height you can notice that the left column doesnt, so i want the left column to appear to be the same height as the page conent.

 

My solution: I deceided to add a bg image to the container div which was repeated when the page content div expanded but this doesnt seem to work.

 

Can anyone tell me why? Thanks

[noober]

You want the bg image to tile up and down/vertically? Use "repeat-y".

[haku]

Google 'faux-columns'. This is the technique you will need to use, since columns cannot know what the height of the other columns are, and will not be able to expand to match them.

[JustLikeIcarus]

Im a big fan of the 960 grid system for layouts. Take a look at http://960.gs/  you may like it.