CSS 플로트 열이 바닥 글 위로 확장됩니다.

내 CSS에 문제가있어서 2 열 레이아웃의 오른쪽 열이 바닥 글을 넘어서 확장됩니다. 나는 clear: both; 특성을 가지고 노는 시도했지만 나는 그것이 동작하지 않습니다CSS 플로트 열이 바닥 글 위로 확장됩니다.

.. alt text http://www.blazeware.net/examples/cssFloat/cssProblem.PNG

두 번째 열은 ID를 모두 열 클래스 column를 사용 column2 있습니다. 꼬리말 html에는 id가 있습니다 footerWrapper

두 열과 바닥 글은 모두 div 태그입니다.

내 CSS (요약 된) : 요약 된

.column { 
    width: 49%; 
} 

#column2 { 
    width: 50%; 
    position: absolute; 
    top: 0px; 
    margin-left: 50%; 
    float: left; 
} 

#footerWrapper { 
    background-color: #333333; 
    border-top: 2px #FF6600 solid; 
    color: #666; 
}

HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <link href="style.css" rel="stylesheet" type="text/css" /> 
    </head> 
    <body> 
    <div id="mainColumns"> 
     <div id="mainContainer"><div class="mainWrapper"> 
     <h1>Title</h2> 
    </div> 
    <!-- start panels --> 
    <div class="panels"> 
     <div class="column"> 
     <h2><img src="../lib/icons/newspaper.png" width="16" height="16">Title</h2> 
     <div> 
      <p>content</p> 
     </div> 
     <p></p> 
     <h2><img src="../lib/icons/rainbow.png" width="16" height="16">Title</h2> 
     <div> 
      <p>content</p> 
     </div> 
     <p></p> 
     <h2><img src="../lib/icons/rainbow.png" width="16" height="16">Title</h2> 
     <div> 
      <p>content</p> 
     </div> 
     </div> 
     <div class="column" id="column2"> 
     <h2><img src="../lib/icons/newspaper.png" width="16" height="16">Title</h2> 
     <div> 
      <p>content</p> 
     </div> 
     <p></p> 
     <h2><img src="../lib/icons/rainbow.png" width="16" height="16">Title</h2> 
     <div> 
      <p>content</p> 
     </div> 
     <p></p> 
     <h2><img src="../lib/icons/rainbow.png" width="16" height="16">Title</h2> 
     <div> 
      <p>content</p> 
     </div> 
     </div> 
    </div> 
    <!-- end panels --> 
    <div class="mainWrapper"></p> 
     </div></div> 
     <div id="sideBar"> </div> 
    </div> 
    <div id="footerWrapper"> 
     <div id="footer"> 
     <h6></h6> 
     </div> 
    </div> 
    </body> 
</html>

출처

2010-04-22 Darbio

일부 HTML도 필요합니다. – zneak

http://css.find-info.ru/css/011/ch05lev1sec4.html –