Como maquetar una pagina web en 3 partes

rockbass2560 · #1 (**permalink**) 13/01/2012, 23:34

Hola deseo maquetar una pagina web en 3 secciones, la de la izquierda y derecha tomen lo que le sobra de espacio al navegador y la del centro de 1024 px...

y la verdad no tengo una idea clara de como

para maquetarla en 2 secciones haria algo como esto

Código HTML:

<html>
   <div id="divIzquierdo" style="float:left;width:100%" ></div>
   <div id="divCentral" style="float:left;width:1024px">
   <!-- contenido -->
   </div>
</html>

Pero los div sin contenido se aplastan a 0, tambien pobre con uno hacia la izquierda y el otro a la derecha pero eso deja que no tenga donde acomodar el div derecho.

Si me pudieran ayduar y muchas gracias.

ocesitaro · #2 (**permalink**) 14/01/2012, 00:13

Cita:

Iniciado por rockbass2560

Hola deseo maquetar una pagina web en 3 secciones, la de la izquierda y derecha tomen lo que le sobra de espacio al navegador y la del centro de 1024 px...

y la verdad no tengo una idea clara de como

para maquetarla en 2 secciones haria algo como esto

Código HTML:

<html>
   <div id="divIzquierdo" style="float:left;width:100%" ></div>
   <div id="divCentral" style="float:left;width:1024px">
   <!-- contenido -->
   </div>
</html>

Pero los div sin contenido se aplastan a 0, tambien pobre con uno hacia la izquierda y el otro a la derecha pero eso deja que no tenga donde acomodar el div derecho.

Si me pudieran ayduar y muchas gracias.

no se puede usar los tamaño que quieres, en una laptop no se va a ver bien, ni en una pantalla de oficina, solo ve va a ver bien en una pantalla de un diseñador.

el estandar de ancho es 1024 y eso descuentale es scroll ponle 980.
lo que podrías hacer si quieres ocupar toda la pantalla
ponerle algo parecido a esto:

Código HTML:

<!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>Documento sin título</title>
<style type="text/css">
html , body{ margin:0; width:100%;}
#contenedor{width:100%; background-color:#F00; min-width:1000px;}
.flotante{float:left;}
.limpiar{clear:both;}
#izquierda{
width:30%;min-width:300px;}
#centro{
width:40%;min-width:400px;}
#izquierda{ background-color:#0F0;}
#centro{ background-color:#03C;}
#derecha{ background-color:#CF0; width:30%;}
</style>
</head>

<body>
<div id="contenedor">
<div class="flotante" id="izquierda">contenido izquierda</div>
<div class="flotante" id="centro">contenido centro</div>
<div class="flotante" id="derecha">contenido derecha </div>
<div class="limpiar"></div>
</div>
</body>
</html>

madhatterdef · #3 (**permalink**) 14/01/2012, 00:32

por qué quieres que el del medio mida 1024??? y por qué los otros no tendrían contenido ???
si solo vas a utilizar el del medio puedes crear una sola y usar margin 0 auto para centrarla
de otro modo puedes usar porcentajes
si no entendí bien vuelve a preguntar y tratare de ayudarte