Ver Mensaje Individual
  #2 (permalink)  
Antiguo 14/01/2012, 00:13
Avatar de ocesitaro
ocesitaro
 
Fecha de Ingreso: diciembre-2011
Ubicación: Carabayllo
Mensajes: 274
Antigüedad: 12 años, 5 meses
Puntos: 36
Respuesta: Como maquetar una pagina web en 3 partes

Cita:
Iniciado por rockbass2560 Ver Mensaje
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>