Problemas con la maquetación

greisy · #1 (**permalink**) 29/05/2009, 15:55

hola, tengo un problema con la maquetación, resulta que tengo mi header, mi content y foot, pero el foot me queda encima del content. Tengo mis identificadores:

#principal => sería el contenedor principal.
#body_center => sería donde va la imagen que se ve a los lados, como el efecto de sombra.
#header y #header2 => iría las propiedades del header.
#footer => iría las propiedades del pie de página.
#content_left => sería el contenedor del lado izquierdo.
#content_right => contenedor lado derecho.

Si le coloco en el height un valor fijo, por ejemplo:
height: 768px;
pero si lo coloco 100%, para que se adapte al contenido no me lo toma.

Realmente lo que necesito es que me ayuden a adaptarse según el contenido que tenga, ya que en unas páginas sobrepasa los 768px, y entonces queda mal.

Aquí coloco el link donde muestro la página:

http://74.208.97.55/prueba/prueba.php

Vayan a ver código que dentro de la misma página coloque los elementos de estilos.

Gracias a los que me puedan ayudar.

Mikmoro · #2 (**permalink**) 29/05/2009, 16:18

Prueba a añadir un overflow: auto a l selector #body_center.
Tanto el contenido izquerdo como el derecho estñan flotados, y por eso el contendor no crece con ellos.

P.D.: el height auto no tiene ninguna utilidad.

greisy · #3 (**permalink**) 29/05/2009, 16:57

Excelente!! Gracias...

Dejaré aquí el código final, por si a alguien que está aprendiendo a maquetar web con css le sirva.

<!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=iso-8859-1" />
<title>Prueba CSS</title>

<style type="text/css">
body {
font-family: "Century Gothic", Tahoma, Arial;
font-size: 12px;
text-align: center;
background-repeat: repeat-x;
background-position: top left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

#principal {
text-align:left;
width: 967px;
margin: auto;
}

#body_center {
width: 967px;
text-align: center;
padding-bottom:100px;
overflow: auto;
}

#header2{
width: 967px;
height: 253px;
background-color: #CCCCCC;
}

#footer {
width: 957px;
height: 80px;
margin: auto;
background-color: #CCCCCC;
}

#footer a:link, a:visited {
font-size:13px;
color: #FFFFFF;
text-decoration:none;
}

#footer a:hover {
font-size:13px;
color: #FFFFFF;
text-decoration:underline;
}

.text_footer {
text-align: center;
padding:22px 0px 0px 0px;
font-size:11px;
color: #FFFFFF;
}

.text_select_idio {
padding:12px 0px 0px 0px;
margin:0;
text-align:right;
font-size:10px;
font-weight:normal;
width: 920px;
}

#content_left {
width: 208px;
float:left;
height: auto;
margin-top: 3px;
padding-left: 15px;
padding-top: 6px;
/*border:1px solid #000000;*/
}

#content_right {
float:right;
width: 705px;
margin-top: 3px;
margin-right: 12px;
/*border:1px solid #000000;*/
line-height: 1.5em;
text-align:justify;
padding-right: 8px;
padding-top: 6px;
}
</style>
</head>

<body>
<div id="principal">
<div id="header2"></div>
<div id="body_center">
<div id="content_left">
cualquier texto o contenido
</div>

<div id="content_right">
cualquier texto o contenido
</div>
</div>

</div>

</div>
<div id="footer">
<div class="text_footer">
Menú y Dirección
<div>
</div>
</body>
</html>

Gracias!!!!