buenas a todos tengo un problema con un div, haciendo un tutorial vi que el div mainContent de la pagina que tienen de muestra tiene un como margin-top que no esta especificado en ningun lugar y ya desarme la pagina y no lo puedo encontrar si alguien de uds me puede decir porque ese div tiene un margen se los agradeceria mucho
el codigo html es el siguiente:
<!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="css/default.css" rel="stylesheet" type="text/css" />
</head>
<body class="thrColFixHdr">
<div id="container">
<div id="header"><a href="/"><img src="images/logo.png" alt="Two Trees Olive Oil. Click for home. " width="192" height="189" /></a>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="left">
<h3>Sidebar1 Content</h3>
<p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the left side of the #mainContent div if it will always contain more content. </p>
<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. </p>
</div>
<div id="right">
<h3>Sidebar2 Content</h3>
<p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the right side of the #mainContent div if it will always contain more content. </p>
<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. </p>
<!-- end #sidebar2 --></div>
<div id="mainContent">
<p>Home > About </p>
<h1>Main Content </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. </p>
<h2>H2 level heading </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
</div>
<br class="clearfloat" />
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>
y el codigo css es el siguiente
@charset "utf-8";
body {
font: 90% Verdana, Arial, Helvetica, sans-serif;
background-color: #e2e7d3;
margin: 0;
padding: 0;
color: #000000;
}
img {
border-style: none;
}
h1, h2, h3, h4, h5, h6 {
font-family: Georgia, "Times New Roman", Times, serif;
color: #403a19;
font-weight: normal;
}
p {
line-height: 1.5em;
}
a:link {
color: #106634;
}
a:visited {
color: #403a19;
}
a:hover {
text-decoration: none;
color: #106634;
}
#container {
width: 960px;
background: #e2e7d3 url(../images/logobottom.png) no-repeat 15px 189px;
margin: 0 auto;
border: 1px solid #403a19;
}
#header {
background: #b9c6aa;
height: 189px;
}
#header img {
float: left;
padding-left: 15px;
padding-right: 50px;
}
#header ul {
margin: 0;
padding: 0;
}
#left {
float: left;
width: 200px;
padding: 70px 20px 15px 20px;
}
#right {
float: right;
width: 200px;
padding: 70px 10px 15px 30px;
}
#mainContent {
margin: 0 250px;
padding: 0 10px;
}
#footer {
padding: 0 10px 0 20px;
background:#403a19;
color: #FFF;
}
#footer p {
margin: 0;
padding: 10px 0;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
