중첩 div의 HTML 및 CSS 도움말

학습 목적으로 프로젝트를하고 있습니다. 메인 div 안에 왼쪽 div와 오른쪽 div가 생기는 문제가 있습니다. 누군가가 코드에서 문제가있는 부분을 지적 할 수 있다면 가장 높이 평가할 것입니다. 당신이중첩 div의 HTML 및 CSS 도움말

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" /> 
<title>Untitled Document</title> 

<link href="template/css/test_css.css" rel="stylesheet" type="text/css" /> 
</head> 

<body> 
<div id="main_wrapper"> 
<div class="wrapper"> 
    <div class="head"></div> 
    <div class="nav"></div> 
    <div id="main"> 
    <div class="left">some data</div> 
    <div class="right">some data</div> 
    </div><!--end main--> 
    <div class="footer"> 
    </div><!--end footer--> 
    </div><!--end wrapper--> 
</div><!--end main_wrapper--> 
</body> 
</html>

CSS 코드

@charset "utf-8"; 
/* CSS Document */ 

body,td,th { 
    font-family: Arial, Helvetica, sans-serif; 
    margin-top:0px; 
    background-color:#FF0000; 
} 

#main_wrapper { 
width:950px; 
margin:auto; 
background-image: url(../images/bg_a.png); 
background-repeat:repeat-y; 
} 


.wrapper { 
background-color:#009900; 
margin-left:5px; 
margin-right:5px; 
} 
.head { 
height:115px; 
} 

.nav { 
height:30px; 
} 
#main { 
padding:10px; 
margin:5px; 
background-color:#0099FF; 
} 
.left { 
width:600px; 
float:left; 
} 
.right { 
width:300px; 
float:right; 
} 
.footer { 
height:50px; 
}

출처

2011-07-17 zack

이 시도 감사 : 더 많은 정보

#main { 
    padding:10px; 
    margin:5px; 
    background-color:#0099FF; 
    overflow: hidden; 
    }

출처

2011-07-17 17:07:06

것은 http://www.quirksmode.org ([여기]를 보면 /css/clearing.html) –

분자의 대답이 있어야합니다. 'main' div에'overflow : hidden'을 추가해야합니다. –

작동 해 주셔서 감사합니다 :) – zack

중첩 div의 HTML 및 CSS 도움말

답변

관련 문제