How to put two divs side by side

So I'm quite new to writing code (about a few weeks) and I've hit a wall while writing code for my website. I want to have a layout like this:

But I can't figure out how to put the two boxes side by side. One box will be a video explaining my website, while the other box will be a sign up registration form. I want the boxes to be next to each other, with about an inch of separation between them.

I also need help with the width of my website's header. Right now it looks like the header doesn't fit on the page, causing a horizontal scroll. Kind of like this:

I want it so that the entire website is like one big box, and all the content is inside that box. Can someone please help me? Much appreciated. Thank you in advance.

Solution 1:

http://jsfiddle.net/kkobold/qMQL5/

#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;
}

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

Solution 2:

This will work

<div style="width:800px;">
  <div style="width:300px; float:left;"></div>
  <div style="width:300px; float:right;"></div>
</div>
<div style="clear: both;"></div>