Foros del Web - Problemas con maquetacion

Foros del Web (http://www.forosdelweb.com/)

- CSS (http://www.forosdelweb.com/f53/)

- - Problemas con maquetacion (http://www.forosdelweb.com/f53/problemas-con-maquetacion-579522/)

Problemas con maquetacion

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:
http://img373.imageshack.us/img373/2825/exampleta0.jpg
Aqui un ejemplo de como queda con position:absolute;
http://img373.imageshack.us/img373/5289/example2ko7.jpg
Este es el ejmplo de como queda con position:relative;
http://img76.imageshack.us/img76/3735/example3qn6.jpg
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!! :adios:

Re: Problemas con maquetacion

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.

Re: Problemas con maquetacion

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.

Re: Problemas con maquetacion

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

Saludos!!