Buenos días,
Resulta que he "montado" la estructura de la web con DIVs pero tengo un problema para que queden unos dentro de otros. La estructura es la siguiente:
Código:
<body>
<div class="container">
<div class="header">
<div class="title"></div>
<div id="menuContenidor">
<div id="home_buscador"></div>
<div id="menu"></div>
</div>
<div id="banner"></div>
<div id="links"></div>
</div>
<div class="content">
<div class="columna1">
<div id="info1"></div>
</div>
<div class="columna2">
<div id="info2"></div>
<div class="blogHome"></div>
<div class="cursosHome"></div>
</div>
</div>
<div class="footer"></div>
</div>
</body>
Y éste es el CSS:
Código:
body {
text-align:center;
}
.container {
width: 800px;
border: 1px solid #000;
margin: 0px auto;
text-align: left;
height: auto;
}
/* BEGIN header */
.header{
margin: 0px 10px 0px 10px;
width: 780px;
float:none;
}
.title{
width: 780px;
height: 35px;
}
#menuContenidor {
width: 780px;
height: 155px;
}
#home_buscador{
width: 100px;
height: 150px;
float: left;
}
/* BEGIN menu */
#menu {
width: auto;
font-size: 0.7em;
margin: 0px;
height: 150px;
float: left;
}
/* END menu */
#banner{
width:780px;
height:200px;
}
#links{
width: 760px;
height: 30px;
padding: 5px 10px;
}
/* END header */
/* BEGIN content */
.content{
margin: 0px 10px 0px 10px;
width: 780px;
float:none;
}
.columna1{
float: left;
width: 388px;
}
#info1{
margin: 10px 5px 10px 10px;
width: auto;
height: auto;
}
.columna2{
float: left;
width: 388px;
}
#info2{
margin: 10px 10px 10px 5px;
}
.cursosHome{
margin: 5px 10px 5px 5px;
}
.blogHome{
margin: 5px 10px 10px 5px;
}
/* END content */
/* BEGIN footer */
.footer{
margin: 0px 10px 10px 10px;
width: 780px;
height: 25px;
float:none;
}
/* END footer */
Y lo que acaba sucediendo con el marco del #container y el del footer es ésto:
farm3.static.flickr.com/2456/3575826036_e6bcd655d3_o[punto]png
Ya veis que quedan desplazados hacia arriba, habiendo establecido el height: auto, o el min-height, etc. siempre pegados arriba, y no lo entiendo porqué bien que si escribo algo en el footer, el texto aparece como se aprecia en la imagen.
Se que habrá más errores en el CSS, ya sea para centrar los DIVs y tal, pero no es lo que me tiene de cabeza ahora.
Muchas gracias por la atención.
Atentamente, laylu.