내 메인 컨텐츠 div가 그 내부의 하위 div에 맞게 확장되지 않는 이유는 무엇입니까?

저는 현대적인 웹 사이트를 만들기 위해 노력해 왔습니다. 하나의 콘텐츠 div 안에 두 개의 열이 있어야합니다. 그러나 여러 시간 동안 시행 착오를 거쳐 온라인에서 찾은 코드는 아무 소용이 없습니다. 내 HTML은 다음과 같습니다내 메인 컨텐츠 div가 그 내부의 하위 div에 맞게 확장되지 않는 이유는 무엇입니까?

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Unnamed Website</title> 
     <link rel="stylesheet" href="../_css/websitename.css" type="text/css"> 
    </head> 
    <body> 
     <div id="wrap"> 
      <div id="header"> 
       <div id="logo"> 
       </div> 
       <div id="nav"> 
        <ul> 
        </ul> 
       </div> 
      </div> 
      <div id="content"> 
       <h2>Header Level Two</h2> 
       <div id="columnleft"> 
        Hello 
       </div> 
       <div id="columnright"> 
        Hello 
       </div> 
      </div> 
      <div id="footer"> 
       <p>Copyright &copy; 2013 BlahBlahBlah.com</p> 
      </div> 
     </div> 
    </body> 
</html>

나는 정직하게 HTML 잘못 아무것도 표시되지 않습니다. 그것은 혼란을 얻을 경우 그러나, CSS는 : 나는 페이지를로드 할 때마다 maincontent의 사업부는 내부의 열 div의와 확장하지 않는

body{ 
    background-color:#333333; 
    font-family:Helvetica; 
} 
div#wrap{ 
    width:1000px; 
    height:auto; 
    margin-top:20px; 
    margin-right:auto; 
    margin-left:auto; 
} 
div#header{ 
    width:980px; 
    height:130px; 
    margin-top:10px; 
    margin-right:auto; 
    margin-left:auto; 
} 
div#content{ 
    background-color:#ffffff; 
    border-color:#ffffff; 
    border-width:1px; 
    border-style:solid; 
    border-top-left-radius:5px; 
    -moz-border-top-left-radius:5px; 
    -webkit-border-top-left-radius:5px; 
    -o-border-top-left-radius:5px; 
    border-top-right-radius:5px; 
    -moz-border-top-right-radius:5px; 
    -webkit-border-top-right-radius:5px; 
    -o-border-top-right-radius:5px; 
    width:950px; 
    height:auto; 
    margin-right:auto; 
    margin-left:auto; 
    padding:0 15px; 
} 
div#footer{ 
    background-color:#eeeeee; 
    border-color:#eeeeee; 
    border-width:1px; 
    border-style:solid; 
    border-bottom-left-radius:5px; 
    -moz-border-bottom-left-radius:5px; 
    -webkit-border-bottom-left-radius:5px; 
    -o-border-bottom-left-radius:5px; 
    border-bottom-right-radius:5px; 
    -moz-border-bottom-right-radius:5px; 
    -webkit-border-bottom-right-radius:5px; 
    -o-border-bottom-right-radius:5px; 
    width:980px; 
    height:40px; 
    margin-bottom:10px; 
    margin-right:auto; 
    margin-left:auto; 
    box-shadow:5px 2px 10px #333333; 
    clear:both; 
} 
#footer p{ 
    text-align:center; 
    font-family:Helvetica; 
    font-size:13; 
    line-height:7px; 
} 
h2{ 
    background-color:#35586c; 
    font-family:Helvetica; 
    font-weight:bold; 
    margin:15px auto; 
    padding:10px; 
    border-width:1px; 
    border-color:#0b0b5b; 
    border-style:solid; 
    border-radius:5px; 
    -o-border-radius:5px; 
    -webkit-border-radius:5px; 
    -moz-border-radius:5px; 
    text-align:center; 
    box-shadow:0 0 1px #ffffff inset; 
    -webkit-box-shadow:0 0 1px #ffffff inset; 
    -moz-box-shadow:0 0 1px #ffffff inset; 
    -o-box-shadow:0 0 1px #ffffff inset; 
    text-shadow:1px 0 2px #222222; 
    color:#fbfffb; 
} 
div#columnleft{ 
    width:200px; 
    height:auto; 
    background-color:#35586c; 
    font-family:Helvetica; 
    font-weight:bold; 
    margin-top:15px; 
    margin-bottom:15px; 
    margin-right:15px; 
    padding:10px; 
    border-width:1px; 
    border-color:#0b0b5b; 
    border-style:solid; 
    border-radius:5px; 
    -o-border-radius:5px; 
    -webkit-border-radius:5px; 
    -moz-border-radius:5px; 
    text-align:center; 
    box-shadow:0 0 1px #ffffff inset; 
    -webkit-box-shadow:0 0 1px #ffffff inset; 
    -moz-box-shadow:0 0 1px #ffffff inset; 
    -o-box-shadow:0 0 1px #ffffff inset; 
    text-shadow:1px 0 2px #222222; 
    color:#fbfffb; 
    float:left; 
} 
div#columnright{ 
    width:710px; 
    height:auto; 
    background-color:#ffffff; 
    font-family:Helvetica; 
    margin-top:15px; 
    margin-bottom:15px; 
    float:right; 
    text-align:justify; 
}

. 나는 각 열을 더 잘 사용자 정의 할 수 있도록 최대한 테이블에서 벗어나고 싶습니다. 태그를 사용하고 싶지 않습니다. 이 문제를 해결할 수있는 방법이 있습니까?

출처

2013-06-08 Zachsweb

는 작업 예를 들어 귀하의 #content 클래스 = "clearfix"여기

.clearfix:before, 
    .clearfix:after { 
     content: "."; 
     display: block; 
     height: 0; 
     overflow: hidden; 
    } 

    .clearfix:after { 
     clear: both; 
    } 

    .clearfix { 
     zoom: 1; /* IE < 8 */ 
    }

같은

CSS를 div에이 같은 행동을하는 이유

http://jsfiddle.net/delueg/u8zvV/

이유입니다 제공 그 때마다 요소를 띄울 때마다 ... 부모 컨테이너는 자식에 해당하는 확장 기능을 잃어 버렸습니다 ... 그것이 바로 clearfix가되는 것입니다. 다른 말로 수레를 지 웁니다.

출처

2013-06-08 21:40:27 delueg

내 메인 컨텐츠 div가 그 내부의 하위 div에 맞게 확장되지 않는 이유는 무엇입니까?

답변

관련 문제