CSS Плавающий не работает

Question

Я хочу построить div следующим образом:

Существует div, который является контейнером (700x400 px). В контейнере есть еще три div. Первый - это div с именем «photo_id». Этот div должен лежать влево, тогда как div-контент должен придерживаться права. Как photo_id, так и контент имеют высоту 266 пикселей. Последний div, называемый «навигация», должен находиться под другими div, так что у меня есть 2 div сверху, а один внизу. Вы поняли, что я имею в виду?

Вот картинка: http://postimg.org/image/lxrxa2h49/

Я не знаю, почему мой код не работает. Что я сделал не так? Я новичок в CSS и пробовал это самостоятельно, но не смог найти хорошего решения во всемирной паутине для моей проблемы! Извините за вопрос, но я действительно не знаю, как это сделать!

Вот мой HTML:

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

и вот мой 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

Прежде всего, избавиться от всех этих position: absolute - это скидывает всю конструкцию.

Во-вторых, навигационная декларация неправильна в вашем HTML; вы используете id вместо class, как вы указали в CSS. Вам также необходимо добавить clear: both к навигации, так как вы хотите, чтобы это было ниже двух вышеперечисленных элементов.

Вот обновленный код:

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

И скрипку: http://jsfiddle.net/Erf8C/1/

Answer 2

пару вещей:

1. вам не нужно position:absolute и bottom:0
2. вы пытается настроить таргетинг на div с класса навигации (.navigation), тогда как на самом деле ДИВ имеет идентификатор навигации (#navigation)

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

Answer 3

Просто удалите position:absolute отовсюду и его сделали.

Answer 4

хорошо здесь ссылка Demo http://jsbin.com/towidite/1/edit

Проверьте CSS и HTML код ниже

.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>