Floats not working

hey folks. i m having problem with a simple layout. its not floating next to each other. rather at the back of first one. here is the code


body{background:#747E80}
div#wrapper{width:1000px;height:800px; margin:0 auto;}
div.header{height:100px; width:1000px;}
div.sidebar{width:200px; height:800px; background:#F5EDE3; float:left; clear:left;}
div.content{background:#CDBFAC; width:800px; height:200px;}

<div id="wrapper">
    <div class="sidebar"></div>
        <div class="content"></div>
 </div>

what am i missing?

Did you try removing clear:left?

Remove the clear left on the side bar and float the content left too. Normally you’d add overflow hidden to the wrapper to contain the floats but you have fixed heights so it’s prob not needed.

ah! the float content solved the problem. damn how can i be lousy