CODEWITHSUNDEEP
htmlcssxhtml
zack
zack

Reputation: 484

HTML and CSS help on nested div

i'm doing a project for learning purpose. i have a problem of getting left and right div's inside the main div. if anyone can point me out where is the problem in the code it will be most appreciated. thank you

HTML code

<!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 code

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

Upvotes: 1

Views: 120

Answers (1)

Molecular Man
Molecular Man

Reputation: 22386

try this:

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

Upvotes: 1

Related Questions