CSS div가 보이지 않습니다.

divs와 혼동하는 웹 사이트를 디자인하고 있습니다. CSS div가 보이지 않습니다.

<div id="header_wrapper"> 
    <div class="header"> 
     <div class="logo"> 
      <img src="css/images/logo-dark.png" alt="Mint Bite" /> 
     </div> 

    </div>  
</div> 

<div id="menu_wrapper"> 
    <div class="menu"> 
     <ul> 
      <li> 
       <a href="">HOME</a> 
      </li> 

      <li> 
       <a href="">HOME</a> 
      </li> 

      <li> 
       <a href="">HOME</a> 
      </li> 

      <li> 
       <a href="">HOME</a> 
      </li>  
     </ul>  
    </div> 
</div>

그리고 CSS :

body 
{ 
    margin:0; 
    padding:0; 
} 
html 
{ 
    background:#d2d1d0; 
    margin:0; 
    padding:0; 
} 
#header_wrapper 
{ 
    background:#232323; 

} 
.header 
{ 
    width:950px; 
    margin:0 auto; 
} 
.logo 
{ 
    width:300px; 
    float:left; 
} 
#menu_wrapper 
{ 
    overflow:auto; 
    background:#333333; 
    margin:0; 
    padding:0; 

} 
.menu 
{ 
    width:950px; 
    margin:0 auto; 
} 

.menu ul 
{ 
    width:550px; 
    margin-left:200px; 
} 
.menu li 
{ 
    float:left; 
    padding:4px; 
} 
.menu li a 
{ 
    color:#FFFFFF; 
}

그러나 header 후 나는 아래 그림과 같은 결과 가지고 대신 menu을 표시하는. 이유가 뭐야? enter image description here

출처

2012-12-08 Suraj Hazarika

헤더 래퍼 div 뒤에 한 줄을 추가하십시오.

<style> 

.clearFix 
{ 
clear:both; 
} 
</style>

는 ... 헤더 DIV 배경은 몸과 동일하게

<div class="clearFix"></div>

출처

2012-12-08 07:34:13 Moiz

당신이 Moiz..But 감사 헤더 래퍼 후하지 # 232323를이 사업부를 추가합니다.! –

<html> 
<head> 
    <style> 
     #mainContainer 
     { 
      width:960px; 
      margin:0 auto; 
     } 
     #header_wrapper 
     { 
      background: #232323; 

     } 
     .header 
     { 
      width: 950px; 
      height:100px; 

     } 
     .logo 
     { 
      width: 300px; 
      float: left; 
     } 
     #menu_wrapper 
     { 
      width:100%; 
      background: #333333; 
      margin: 0; 
      padding: 0; 
      overflow:auto; 
     } 
     .menu 
     { 
      width: 950px; 
      margin: 0 auto; 
     } 

     .menu ul 
     { 
      width: 550px; 
      margin-left: 200px; 
     } 
     .menu li 
     { 
      float: left; 
      padding: 4px; 
     } 
     .menu li a 
     { 
      color: #FFFFFF; 
     } 
    </style> 
</head> 
<body> 
    <div id="mainContainer"> 
     <div id="header_wrapper"> 
      <div class="header"> 
       <div class="logo"> 
        <img src="css/images/logo-dark.png" alt="Mint Bite" /> 
       </div> 
      </div> 
     </div> 
     <div id="menu_wrapper"> 
      <div class="menu"> 
       <ul> 
        <li><a href="">HOME</a> </li> 
        <li><a href="">HOME</a> </li> 
        <li><a href="">HOME</a> </li> 
        <li><a href="">HOME</a> </li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

출처

2012-12-08 07:42:55 Moiz

CSS div가 보이지 않습니다.

답변

관련 문제