Buenas a todos, llevo unos dias intentado maquetar una web super sencilla (soy programador y no tengo idea de estilos) y resulta que no consigo hacer que un div contenedor crezca segun el contenido, les dejo el html y el css , si tienen un ratito para mirarlo se lo agradeceria, soy novato en css...
El tema es que tanto el div maincontent, como el content , crezcan segun el contenido del div dinamiccontent, dejando el div mainmenu justo debajo del dinamiccontent.
Os dejo una captura de lo que pretendo... http://imageshack.us/photo/my-images/685/29184509.jpg/
Gracias por su atención y disculpas por preguntar algo que supongo es tan básico pero no consigo alcanzar.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JJJJJJJJJJJJJJJJJ</title>
<link rel="stylesheet" type="text/css" href="css/styleBrands.css" />
<!--[if lt IE 9]>
<script type="text/javascript">
document.createElement("nav");
document.createElement("header");
document.createElement("footer");
document.createElement("section");
document.createElement("article");
document.createElement("aside");
document.createElement("hgroup");
</script>
<![endif]-->
</head>
<body>
<div id="Main">
<div id="Header">
<div id="Header1">
<h1 class="tittle">JJJJJJJ JJJJJJJJ</h1>
<h2 class="tittle">JJJJJJ</h2>
<div id="Separador"></div>
</div>
</div>
<div id="MainContainer">
<div id="Content">
<nav id="Brands">
<ul id="ulBrands" class="liEnlaces">
<li><a href="#" alt"">Brand</a></li>
<li><a href="#" alt"">Brand</a></li>
<li><a href="#" alt"">Brand</a></li>
<li><a href="#" alt"">Brand</a></li>
<li><a href="#" alt"">Brand</a></li>
<li><a href="#" alt"">Brand</a></li>
</ul>
</nav>
<div id="TittleBrand">
<p align="center" id="TittleBrandP">BRAND</p>
</div>
<section id="DinamicContent">
<div id="Items">
<table border="1px" cellspacing="20px" cellpadding="15px" width="700px" id="Catalogo">
<tr>
<td ><img src="images/foto.jpg"> <p class="pJoyaMarca" align="right">Sortija Parentesi Ob</p></td>
<td ><img src="images/foto.jpg"> <p class="pJoyaMarca" align="right">Sortija Parentesi Ob</p></td>
</tr>
<tr>
<td ><img src="images/foto.jpg"> <p class="pJoyaMarca" align="right">Sortija Parentesi Ob</p></td>
<td ><img src="images/foto.jpg"> <p class="pJoyaMarca" align="right">Sortija Parentesi Ob</p></td>
</tr>
<tr>
<td ><img src="images/foto.jpg"> <p class="pJoyaMarca" align="right">Sortija Parentesi Ob</p></td>
<td ><img src="images/foto.jpg"> <p class="pJoyaMarca" align="right">Sortija Parentesi Ob</p></td>
</tr>
</table>
</div>
</section>
</div>
<nav id="MainMenu">
<ul id="ulMenu" class="liEnlaces">
<li><a href="History.html">Una historia familiar</a></li>
<li><a href="Brands.html">Toda tentación tiene su marca</a></li>
<li><a href="Collections.html">Colecciones</a></li>
<li><a href="Contact.html">Contacto</a></li>
</ul>
</nav>
</div>
<footer id="Footer">
<p>JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ</p>
</footer>
</div>
</body>
</html>
body
{
background-color:white;
font-family: Arial;
font-size: 14px;
height: 100%;
margin: 0px;
padding: 0px;
width: 100%;
}
html
{
height: 100%;
width: 100%;
}
h1, h2, h3, p, div, a, img, ul, li
{
margin: 0px;
padding: 0px;
}
a{
text-decoration:none;
}
a:link {
color: #ac4b62;
}
a:visited {
color: #ac4b62;
}
#Brands{
border:1px solid orange;
float: left;
height:500px;
padding-left:50px;
width:150px;
}
#Content{
background-color: white;
border-bottom:2px solid #900e2d;
border-left:2px solid #900e2d;
border-right:2px solid #900e2d;
margin:0 auto 2% auto;
width:956px;
}
#DinamicContent{
border:1px solid blue;
height:500px;
width:723px;
float:right;
margin-bottom:100px;
}
#Footer{
margin-right:2%;
text-align:right;
}
#Footer p{
padding:0px;
margin:0px;
}
#Header{
background-color: #f4f4f4;
border-top:2px solid #f4f4f4;
border-right:2px solid #f4f4f4;
border-left:2px solid #f4f4f4;
margin:2% auto 0 auto;
width:996px;
}
#Header1{
background-color: white;
border-left:2px solid #900e2d;
border-right:2px solid #900e2d;
border-top:2px solid #900e2d;
margin:2% auto 0 auto;
width:956px;
}
#Items{
border:1px solid green;
width:723px;
}
.liEnlaces{
list-style:none;
}
#Main{
width:1000px;
margin:0 auto;
}
#MainContainer{
background-color: #f4f4f4;
border-right:1px solid #f4f4f4;
border-left:1px solid #f4f4f4;
border-bottom:1px solid #f4f4f4;
margin:0 auto;
width:996px;
min-height:500px;
}
#MainMenu{
clear:both;
border:1px solid red;
}
.pJoyaMarca{
margin-right:15%;
font-size:1.1em;
font-weight:bold;
}
#Separador{
margin:0 auto;
border-top:3px solid #900e2d;
width:860px;
}
.tittle{
text-align:center;
padding:10px;
}
#TittleBrand{
border:1px solid pink;
font-size:3em;
margin:0 auto;
padding-top:15px;
width:40%;
}
#TittleBrandP{
margin: 0px;
}
#ulBrands{
border-right:3px solid #900e2d;
margin-left:5px;
margin-top:35px;
height:380px;
}
#ulBrands li{
font-size:1.5em;
padding-top:15px;
}
#ulMenu {
margin: 3% auto 0.6% auto;
text-align:center;
}
#ulMenu li{
display: inline;
list-style-type: none;
margin-right: 0.5%;
padding:1% 0% 3% 0%;
font-size:1.2em;
font-weight:bold;
}
#ulMenu li:hover{
background: #900e2d;
}
#ulMenu li a {
padding:1% 1% 3% 1%;
}
#ulMenu li a:hover {
color:white;
}
