CSS 및 div 위치 지정

Question

나는 평소 테이블 대신 div를 사용하여 일부 html을 만들려고합니다.

내가 원하는 것은 #company div 아래에 표시되는 #hdrdetail 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/). 당신은

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

에 float:none를 제거하고 clear:both로 교체해야합니다. clear:both 규칙은 "왼쪽 또는 오른쪽에 부동 요소가 허용되지 않습니다"라는 조건을 설정합니다.