내가 가진

Question

tabless 레이아웃 바닥 글에 맑은 속성에 관련된 일부 의혹은 HTML + CSS를 사용하여 다음 고정 tabless 레이아웃을 구현 : http://onofri.org/example/WebTemplate/

이이 레이아웃을 (내가 몇 가지 설정을 마무리해야한다) 이 floatted 열 #content 및 #sidebar 이러한 열에서이 배치되는 바닥 글 DIV #footcontainer

좋아, 그래서 elemen을 취소해야 ts는 견인 열 (문서의 정상적인 흐름에서 요소를 가져옴) 아래에 놓아야합니다. 이렇게하려면 명확한 CSS 속성을 사용합니다.

나는 다른 방식으로 그렇게 할 수 있음을 읽었습니다. 내 예에서

나는 빈 DIV 가진 ID clearer2을 만든 그 다음 CSS 설정이 있습니다

#clearer2{ 
    clear: both; 
} 

이 작품을 잘하지만, 나는 나는이에서의 footercontainer 직접 명확도 할 수 알고 방법 : 내가 설정 때문에 로직 레벨에서

#footcontainer { 
    clear: both; 
    width: 100%; 
    min-height: 200px; 
    height: auto !important; 
    height: 200px; 
    background: #4f4f4f url(../images/bgfooter.jpg) repeat-x 0 0; 
    box-shadow: 0 -13px 25px 5px #b2b2b2; 
} 

이 같은 일을 할 수 있어야 명확 : 모두; 속성에 대한 속성이며이 속성은 모든 연속 항목에 유효합니다. 그러나 온라인으로 읽는 것은 나에게 첫 번째 해결책은 두 번째 방법보다 낫다고 생각합니다. 이유는 분명 다음 (예에서 사업부 #footercontainer) 해당 요소에 직접 I 유효한 솔루션은 사용이

솔루션을 그것을 그 (빈 DIV로) 새로운 항목을 creat에하는 것이 좋습니다? clear: both 속성

TNX

안드레아

Answer 1

div를 하나가 ("오래된 솔루션"표시) http://www.quirksmode.org/css/clearing.html에 설명 된대로 그들은 단지 안에있는 div 떠 때 기대할 수 그들의 부모 div의 자신의 높이를 확장합니다.

귀하의 예에서 이것은 clear: both이 달성 한 것입니다. 주요 div (#container 및 #footcontainer)가 동일한 div 계층 구조 레벨에 있고 부동 상태가 아니기 때문에 정상 흐름을 재설정 할 필요가 없습니다.

당신은 제대로 확장 할 #container에 이러한 속성을 추가 할 수 있습니다 :

#container { 
    ... 
    overflow: auto; 
    width: 770px; /* Needed for some older browsers */ 
}