Problemas con maquetacion

messer · #1 (**permalink**) 24/04/2008, 08:24

Buenas! Saludos a todos.

Estoy haciendo una maquetacion con CSS y se me presenta el siguiente inconveniente:

- Quiero que el tamano de la pagina se adapte al contenido pero se sale la capa de su contenedor.

Aca un ejemplo de como quiero que quede:

Aqui un ejemplo de como queda con position:absolute;

Este es el ejmplo de como queda con position:relative;

A ver en que me pueden ayudar.

Este es el codigo:

HTML

Código:

<!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>CSS</title>
<style type="text/CSS">
body{margin:0px; background:#336699; font: 12px Georgia, "Times New Roman", Times, serif;}

#MainFrame{position:relative;margin:20px auto 20px auto; text-align:center; width:904px;}
#Container{text-align:left; width:100%; background:transparent url(../images/sombra3.gif); padding:4px;}
#Content{width:100%;background:#FFF; /*overflow:hidden;  height:540px; border:1px solid #FFF;*/}


#Header{
	position:relative;
	width:100%;
	height:90px;
	background:#0099CC;
}

#NavMenu{width:892px; padding:6px; background:#336666;}

#WebContents{
	position:relative; padding:4px; /*height:600px;*/
}

#Div1{background:#EFEFEF; width:200px; height:400px;}
#Div2{left:2px; left:207px; background:#F4F4F4; width:540px; height:800px;}
#Div3{left:750px; background:#EFEFEF; width:150px; height:760px;}

#Footer{background:#999; border-top:1px solid #000;padding:10px 20px 10px 20px;}
</style>
</head>
<body>
<div id="MainFrame">
<div id="Container">
  <div id="Content">
 	<div id="Header">Content</div>
    <div id="NavMenu">&nbsp;</div>
    <div id="WebContents">
            <div id="Div1">&nbsp;</div>
            <div id="Div2">&nbsp;</div>
            <div id="Div3">&nbsp;</div>
      </div>
    <div id="Footer">Text
    </div> 
  </div>
</div>
</div>
</body>
</html>

Saludos!!

messer · #2 (**permalink**) 24/04/2008, 09:46

Le he puesto una tabla en la seccion intermedia (contenido) y obtengo el resultado que quiero, pero lo que busco es lograrlo sin utilizar tablas.

Saludos nuevamente.

Mikmoro · #3 (**permalink**) 24/04/2008, 10:27

Creo que lo primero que necesitas es colocar esas 3 cajas flotadas. Después te hace falta darle un corte con clear: both; al contenedor de esas 3 cajas.

Prueba con esto a ver si va como tú quieres:

Cita:

<!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" lang="es-es">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>CSS</title>
<style type="text/CSS">
body{margin:0px; background:#336699; font: 12px Georgia, "Times New Roman", Times, serif;}
#MainFrame{position:relative;margin:20px auto 20px auto; text-align:center; width:904px;}
#Container{text-align:left; width:100%; background:transparent url(../images/sombra3.gif); padding:4px;}
#Content{width:100%;background:#FFF; /*overflow:hidden; height:540px; border:1px solid #FFF;*/}
#Header{
position:relative;
width:100%;
height:90px;
background:#0099CC;
}
#NavMenu{width:892px; padding:6px; background:#336666;}
#WebContents{
position:relative; padding:4px; /*height:600px;*/
}
#Div1{background:#EFEFEF; width:200px; height:400px; float: left;}
#Div2{background:#F4F4F4; width:540px; height:800px; float: left;;}
#Div3{background:#EFEFEF; width:150px; height:760px; float: left;}
#Footer{background:#999; border-top:1px solid #000;padding:10px 20px 10px 20px;}
.corte {clear: both;}
</style>
</head>
<body>
<div id="MainFrame">
<div id="Container">
<div id="Content">
<div id="Header">Content</div>
<div id="NavMenu"> </div>
<div id="WebContents">
<div id="Div1"> </div>
<div id="Div2"> </div>
<div id="Div3"> </div>
</div>
<div class="corte"></div>
<div id="Footer">Text </div>
</div>
</div>
</div>
</body>
</html>

Ya contarás.

Mikel.

messer · #4 (**permalink**) 24/04/2008, 13:20

Muy bien! muchas gracias me ha servido.. Investigare respecto a la propiedad clear, no la conocia.

Saludos!!