css - Aligning two divs going wrong..? -

i trying align 2 div's side side. both div's contained in div.

this html , css code have written , it's going horribly wrong.

html :

<div id="content">       <div id="main"></div>  <div id="sidebar"></div>      </div> 

css :

 #content {     width: 1000px;         } #sidebar {     width: 200px;     float: left;     height: 400px;     background-color: red; } #main {     width: 800px;     margin-left: 200px;     height: 400px;     float: left;     background-color: blue; } 

here jsfiddle

edit : code has worked me follows :

<div id="content">   <div id="sidebar"></div>  <div id="main"></div>  </div> 

and css follows :

#content {     width: 1000px;     overflow: auto; } #sidebar {     width: 200px;     height: 400px;     float: left; } #main {     width: 800px;     height: 400px;     margin-left: 200px; } 

i dont know reason but...

overflow : auto; 

was needed displayed in right way.

get rid of margin-left: 200px;

jsfiddle example

that's pushing blue div right , causing red div drop down since there's not enough room both exist next each other.