嵌套div的HTML和CSS帮助

时间:2011-07-17 17:02:25

标签: html css xhtml

我正在做一个学习目的的项目。我有一个问题是在主div内得到左右div。如果有人能指出我在代码中的问题在哪里,将是最受欢迎的。谢谢

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;
}

1 个答案:

答案 0 :(得分:1)

试试这个:

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