CSS и расположение div

Question

Я пытаюсь создать некоторый html используя divs вместо обычных таблиц.

То, что я хочу, это #hdrdetail div, который будет отображаться под заголовком #company div - оранжевый div, начинающийся под зеленым div. Я не уверен, как использовать float.

Надеюсь, этого достаточно, чтобы ответить.

#maindiv { 
 
     background-color: yellow; 
 
     height: 100 % ; 
 
     width: 700px; 
 
     margin: auto; 
 
} 
 
#logoleft { 
 
     width: 25 % ; 
 
     float: left; 
 
     height: 40px; 
 
     background-color: red; 
 
} 
 
#company { 
 
     width: 50 % ; 
 
     float: left; 
 
     height: 80px; 
 
     background-color: green; 
 
} 
 
#logoright { 
 
     width: 25 % ; 
 
     float: right; 
 
     height: 40px; 
 
     background-color: red; 
 
} 
 
#hdrdetail { 
 
     float: none; 
 
     width: 100 % ; 
 
     height: 80px; 
 
     background-color: orange; 
 
} 
 
#weekly_lefthdr { 
 
     float: left; 
 
     width: 50 % ; 
 
     height: 60px; 
 
     background-color: blue; 
 
} 
 
#weekly_righthdr { 
 
     float: right; 
 
     width: 50 % ; 
 
     height: 60px; 
 
     background-color: aliceblue; 
 
}

<div id="maindiv"> 
 
    <div> 
 
    <div id="logoleft"></div> 
 
    <div id="company"></div> 
 
    <div id="logoright"></div> 
 
    </div> 
 
    <div id="hdrdetail"> 
 
    <div id="weekly_lefthdr"> 
 
    </div> 
 
    <div id="weekly_righthdr"> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Вам не нужно устанавливать float: none;, что вы должны использовать вместо этого clear: both; то есть;

#hdrdetail { 
    clear:both; 
    width:100%; 
    height:80px; 
    background-color:orange; 
} 

float: none просто будет снято с охраной поплавок элемента, который в вашем случае не был установлен в любом случае, в то время как clear: both поместит элемент ниже любые плавал элементы над ним.

Надеюсь, это поможет.

Answer 2

А вот скрипка: http://jsfiddle.net/vcpfygpt/1/. Вы должны удалить float:none в

#hdrdetail { 
    clear:both; 
    width: 100% ; 
    height: 80px; 
    background-color: orange; 
} 

и заменить его clear:both. Правило clear:both устанавливает условие, что «никакие плавающие элементы не будут разрешены ни с левой, ни с правой стороны».