CSS 레이아웃 - 바닥 글이 페이지의 내용과 겹치고 있습니다.

Question

CSS가 처음인데 레이아웃을 온라인으로 찾았지만 맞춤 설정에 약간의 문제가 있습니다.

mainContent div의 내용이 "높은"다음 왼쪽 메뉴가

, 모든 것을 확인하고있다 -하지만 mainContent가 작은 경우, 그것은 다음과 같습니다

이

DIV 순서를 볼 수 있습니다 Firefox WebDevelopper 애드온을 통해. .css 파일은 다음과 같습니다.

body { 
    padding: 0px; 
    margin: 0px; 
    font-family: Arial, Helvetica, sans-serif; 
} 

#container { 
    padding-right: 20px; 
    padding-left: 20px; 
} 

#header { 
} 

#mainMenu { 
    border: 1px solid #808080; 
    font-size: 0.8em; 
} 

#pageBody { 
    position: relative; 
} 

#sidebar { 
    width: 250px; 
    padding: 5px 10px 10px 10px; 
    float: left; 
    border: 1px solid #808080; 
    font-size: 0.8em; 
    margin-top: 5px; 
    margin-right: 10px; 
    min-height: 500px; 
} 

.mainContent { 
    text-align: justify; 
    min-width: 400px; 
    min-height: 500px; 
    margin-left: 285px; 
} 

#footer { 
    font-size: 0.8em; 
    border-top-style: solid; 
    border-top-width: 1px; 
    border-top-color: #CCCCCC; 
    text-align: center; 
    color: #CCCCCC; 
    background-color: #333333; 
    padding-top: 10px; 
    padding-bottom: 10px; 
    margin: 0; 
    /*clear: both;*/ 
} 

#footer p { 
    margin-top: 0px; 
    margin-bottom: 5px; 
} 

#footer a { 
    color: #CC3300; 
    text-decoration: none; 
} 

#footer a:hover { 
    color: #FF9900; 
} 

이 레이아웃을 복구하는 데 필요한 지침이 있습니까? 나는 비슷한을 acheive 싶습니다 :

정확한 위치는, 그냥 바닥 글이 pageBody div의 아래에 배치하지 않는 것이 중요합니다입니다.

나는 도움을 주셔서 감사합니다.

Answer 1

당신의 HTML이 어떻게 생겼는지는 모르겠지만, 바닥 글 바로 앞에있는 지우기 div를 삽입 해보십시오. btw, 왜 '맑음 : 둘 다'입니까? 바닥 글 CSS 규칙에서 주석 처리 했습니까? 그것이 도움이 될 것입니다 여부를

<div style="clear: both;"/> 

긍정적하지,하지만 난 당신의 문제를 올바르게 기능을 이해한다면, 이것은 나의 추측이다 :

코드는 바닥 글 DIV 전에 삽입!

Answer 2

하기에 pageBody을 변경해보십시오 :이 일을 간과

#pageBody { 
    float: left; 
    clear: both; 
}