I am working on a simple css design for my site. It has a header, footer, and I am trying to divide the content into two columns.

the attempt is here:

http://www.jimpix.co.uk/rejig/008.htm

I have the two content columns defined as:

#leftcol {
width:70%;
float:left;
border:1px solid black;
}

#rightcol {
width:25%;
float:right;
border:1px solid black;
}

The above divs sit within a main 'content' div:

#content {
padding:10px;
border-top:2px solid #999999;
border-bottom:10px solid black;
}

But when I view the site in either IE6 or Firefox, the rightcol and leftcol divs do not sit within the content div, or at least, they don't appear to on the screen. Instead of the 'content' div expanding to contain the leftcol and rightcol divs, it just sits at the top, hence why there is a big black line at the top, instead of at the bottom, underneath the columns.

Can anyone see what I am doing wrong please?

Thanks

Jim