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:
Saludos!! <!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"> </div>
<div id="WebContents">
<div id="Div1"> </div>
<div id="Div2"> </div>
<div id="Div3"> </div>
</div>
<div id="Footer">Text
</div>
</div>
</div>
</div>
</body>
</html>
Mode Lineal
