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/

Answer 2

couple of things:

1. you don't need position:absolute and bottom:0
2. you are trying to target a div with a class of navigation (.navigation) whereas the div actually has an id of navigation (#navigation)

jsfiddle: http://jsfiddle.net/aXmQg/

Answer 3

Just remove position:absolute from everywhere and its done.

Answer 4

okay here is the Demo link http://jsbin.com/towidite/1/edit

check the CSS and HTML code below

.container{width:700px;border:1px solid #000;height:500px;}
#photo_id{height:266px; background:red;float:left;width:200px;}
#content{background:green;height:266px;float:left;width:500px;}
#navigation{clear:left;}
#navigation ul{margin:0 padding:0}
#navigation ul li{display:inline-block;}

/--HTML--/

<div class="container">
    <div id="photo_id">
      photo
    </div>
    <div id="content">content
    </div>
    <div id="navigation">
      <ul>
        <li>Item1</li>
        <li>Item2</li>
        <li>Item3</li>
        <li>Item4</li>
        <li>Item5</li>
      </ul>
    </div>
</div>