For some reason the "left" and "right" divs are not staying within the "content" div. I have posted the HTML/CSS. I can't seem to figure this out!
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>Title</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
</head>
<body>
<div class="wrap">
<img src="images/trimtop.gif" align="top" />
<div class="container">
<div class="header"></div>
<div class="nav">nav</div>
<div class="content">
<div class="left">left content</div>
<div class="right">right content</div>
</div>
<div class="footer">foot</div>
</div>
<img src="images/trimbottom.gif" align="bottom" />
</div>
</body>
</html>
CSS:
@charset "UTF-8";
/* CSS Document */
body {
font-family:Arial, Helvetica, sans-serif;
background-image:url(images/gradient.png);
background-repeat:repeat-x;
background-color:#b1b1b1;
maring:0px;
padding-top:25px;
text-align:center;
}
.wrap {
margin:0px auto;
padding:10px 0px 10px 0px;
text-align:left;
width:900px;
background-repeat:repeat-y;
}
.container {
margin:0px auto;
width:700px;
}
.header {
width:700px;
height:124px;
background-image:url(images/header.gif);
background-repeat:no-repeat;
}
.nav {
width:700px;
height:30px;
}
.content {
padding:0px;
width:700px;
background-color:#ffffff;
color:#666666;
}
.left {
padding:20px;
width:300px;
float:left;
}
.right {
padding:20px;
width:300px;
float:right;
}
.footer {
clear:both;
width:700px;
}
Thanks for the help!
