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

*floated in the air*. How could it be possible while the elements are removed from document normal flow? — Hashem Qolami, Feb 24 '14 at 21:26
yeah, now it's working but the div for the navigation! How do I make this happen? — fjw, Feb 24 '14 at 21:26

score 2 · Accepted Answer · answered Feb 24 '14 at 21:28

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/

score 0 · Answer 2 · answered Feb 24 '14 at 21:27

0

couple of things:

you don't need position:absolute and bottom:0
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/

answered Feb 24 '14 at 21:27

willanderson

1,458
12
13

oh yeah. Sorry about that. Changed it in the CSS file, and forgot it to change it in the html! My fault – fjw Feb 24 '14 at 21:29

score 0 · Answer 3 · answered Feb 24 '14 at 21:28

0

Just remove position:absolute from everywhere and its done.

answered Feb 24 '14 at 21:28

Mohinder Singh

1,848
1
13
14

score 0 · Answer 4 · answered Feb 24 '14 at 21:31

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>

CSS Floating not working

4 Answers4