CSS Floating not working

Question

I want to build a div like this:

There is a div, which is the container (700x400 px). In the container, there are 3 more divs. The first one is the div called 'photo_id'. This div should stick to the left whereas the div 'content' should stick to the right. Both the photo_id and content have a height of 266px. The last div called 'navigation' should be underneath the other divs, so that I have 2 div at the top, and one on the bottom. Did you get what I mean?

Here's a picture: http://postimg.org/image/lxrxa2h49/

I don't know why my code is not working. What did I do wrong? I am new to CSS and tried it by myself, but could not find any good solution in the world wide web for my problem! Sorry for asking, but I really don't know how to do it!.

Here's my html:

<div class="container">
    <div id="photo_id">
    </div>
    <div id="content">
    </div>
    <div id="navigation">
    </div>
</div>

and here's my css:

.container {
    height: 400px;
    width: 700px;
    background-color: #ecf0f1;
    border: 1px solid #bdc3c7;
}

div#photo_id {
    height: 266px;
    width: 233px;
    position: absolute;
    float: left;
}

div#content {
    height: 266px;
    width: 467px;
    position: absolute;
    float: right;
}

.navigation {
    height: 134px;
    width: 700px;
    bottom: 0;
    position: absolute;
}

Answer 1

First of all, get rid of all of those position: absolute - this throws off the whole design.

Secondly, your navigation declaration is incorrect in your HTML; you're using an id instead of a class as you've specified in the CSS. You also need to add a clear: both to the navigation since you want it below the two above floated elements.

Here's the updated code:

HTML

<div class="container">
    <div id="photo_id">
    </div>
    <div id="content">
    </div>
    <div class="navigation">
    </div>
</div>

CSS

.container {
    height: 400px;
    width: 700px;
    background-color: #ecf0f1;
    border: 1px solid #bdc3c7;
}

div#photo_id {
    height: 266px;
    width: 233px;
    float: left;
    background: red;
}

div#content {
    height: 266px;
    width: 467px;
    float: right;
    background: blue;
}

.navigation {
    height: 134px;
    width: 700px;
    bottom: 0;
    background: orange;
    clear: both;
}

And fiddle: http://jsfiddle.net/Erf8C/1/