Why wont my divs float?

Question

Why wont my divs float? Content1 and Content2 should sit side by side. What am I missing? I am sure that it is something simple. i am obviously very early on in this project, so no need to correct all the other crap :).

Here is my css:

body {
    margin: 0;
    background-color: #cccccc;
}

#header {
    width: 100%;
    height:90px;
    background-color: #999999;
}

#container {
    margin-right: 20%;
    margin-left: 20%;
    width: 1000px;
}

#content1 {
    width: 300px;
    float: left;
}

#content2 {
    width: 405px;
    float: left;
}

#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:90px;
   background-color: #999999;
}

Here is my html:

<div id="header">
  My Personal Page
</div>

<div id="container">

<div id="Content1">
  <img src="http://localhost:8888/portrait.png" height="400">
</div>

<div id="Content2">
  <img src="http://localhost:8888/portrait.png" height="400">
</div>

</div>

<div id="footer">
  Copyright Information
</div>

Answer 1

Because you wrote your id's wrong.
The name of the ID must be excactly the same as the name in your css sheet. In html you have Content1 with an uppercase C while in your css you have content1 with a lowercase c.
This same scenario you have with Content2(html) and content2(css).

Your html: (Wrong)

<div id="Content1"> && <div id="Content2">

New html: (Right)

<div id="content1"> && <div id="content2">

DEMO