Floating two divs between a top and a bottom div

by ryanwfiorini

HTML

<div id="column-top"></div>
<div id="container">
    <div id="column_left_content"></div>
    <div id="column_right"></div>
</div>
<div id="column_bottom"></div>

CSS

#column-top {background-color:red;}
#column_left_content {background-color:blue;}
#column_right {background-color:green;}
#column_bottom {background-color:black;}
#container {width:735px; }

#column-top {
    width:735px; 
    height:40px;
    background-image:url('http://www.fakenamegenerator.com/dummyimage/480x60/CCCCCC/000000/1');
}

#column_left_content{
    width:575px; 
    min-height:500px;
    margin:0; 
    padding:0;
    float:left;
    background-image:url('http://www.fakenamegenerator.com/dummyimage/100x600/CCCCCC/000000/1');
    background-repeat:repeat-y; 
}

#column_right {
    width:160px;
    height:900px;
    float:left;
    margin:0; 
    padding:0;
    background-image:url('http://www.fakenamegenerator.com/dummyimage/170x60/CCCCCC/000000/1');
    background-repeat:repeat-y;
}    
#column_bottom {
    width:735px; 
    height:40px;
    clear:both;
    background-image:url('http://www.fakenamegenerator.com/dummyimage/468x60/CCCCCC/000000/1');
}