html - How to put two div boxes side by side -

so i'm quite new writing codes(about few weeks) , i've hit wall while writing codes website. want have layout such this

can't figure out how put 2 boxes side side(one box video explaining website, other box sign registration form.) want them next each other, inch separation between boxes.

i need width of website? right looks header doesn't fit on page, causing horizontal scroll. kinda

want entire website looks 1 big box, , want content inside box. can please me? appreciated. thank in advance.

it's quite simple:

http://jsfiddle.net/kkobold/qmql5/

<div id="header"></div> <div id="container">     <div id="first"></div>     <div id="second"></div>     <div id="clear"></div> </div> 

--

#header {     width: 100%;     background-color: red;     height: 30px; }  #container {     width: 300px;     background-color: #ffcc33;     margin: auto; } #first {     width: 100px;     float: left;     height: 300px;         background-color: blue; } #second {     width: 200px;     float: left;     height: 300px;     background-color: green; } #clear {     clear: both; }