Crear web de tres columnas

felipe88 · #1 (**permalink**) 29/09/2009, 09:39

Cordial saludo a la comunidad Foros del Web,
como verán soy nuevo, pero a la vez con entusiasmo por aprender.
Comparto aquí con ustedes una inquietud que tengo al intentar dividir una web en tres columnas, de manera muy chapuza (novato claro

) hago esto:

Código HTML:

 <body>
	<div id="cuerpo">
		<div id="izquierda">
			Contenido del lado izquierdo
		</div>
		<div id="centro">
			Contenido del centro
		</div>
		<div id="derecha">
			Contenido del lado derecho
		</div>
	</div>
  </body>

Y en el archivo CSS lo siguiente:

Código HTML:

#cuerpo
        {
        padding: 0px;
        margin: 0px;
        width: 100%;
        height: 100%;
        position: relative;
    }
#izquierda
        {
        padding: 0px;
        margin: 0px;
        width: 291px;
        height: 100%;
        background-color: #d0cece;
        float: left;
    }
#centro
        {
        padding: 0px;
        margin: 0px;
        width: 100%;
        height: 100%;
        background-color: #ffffff;             
    }
#derecha
        {
        padding: 0px;
        margin: 0px;
        width: 230px;
        height: 100%;
        background-color: #d0cece;             
        float: right;
    }

Entiendo que tengo errores allí, pero no relaciono la causa, por lo que no se muestra la web como deseo, espero me puedan orientar.

Saludos!

deirdre · #2 (**permalink**) 29/09/2009, 10:02

Hola felipe88

Bienvenido al foro

No conozco exactamente que es lo que deseas, pero pueba esto (a ver si es lo que necesitas):

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>Contenidos en tres columnas</title>
<style>
* {
	margin: 0;
	padding: 0;
	outline: 0;
}
html, body {
	width: 100%;
	height: 100%;
	overflow: auto;
}
#cuerpo {
        width: 100%;
        height: 100%;
        position: relative;
}
#izquierda {
        width: 291px;
        height: 100%;
        background-color: #d0cece;
        float: left;
}
#centro {
        width: auto;
        height: 100%;
        background-color: #ffffff; 
        float: left;
}
#derecha {
        width: 230px;
        height: 100%;
        background-color: #d0cece;             
        float: right;
    }
</style>
</head>

<body>
	<div id="cuerpo">
		<div id="izquierda">
			Contenido del lado izquierdo
		</div>
		<div id="centro">
			Contenido del centro
		</div>
		<div id="derecha">
			Contenido del lado derecho
		</div>
	</div>
  </body>
</html>

Comenta algo...

Bye

hwelt · #3 (**permalink**) 29/09/2009, 10:05

pone en el
#izquierda ...float:left;
#centro ...float:inherit;
#derecha ...float:right;

felipe88 · #4 (**permalink**) 29/09/2009, 10:24

Hola,
lamentablemente hasta ahora no me ha funcionado, la idea finalmente es que la distribución sea algo similar a esto:

img525.imageshack.us/img525/5472/dibujoaj.png

Gracias por su ayuda

.

Saludos!

felipe88 · #5 (**permalink**) 29/09/2009, 10:25

Tuve que colocar el link en esa forma ya que el foro no me permite por poca antigüedad.

Saludos!

kseso? · #6 (**permalink**) 29/09/2009, 10:36

Creo que lo que buscas es un layout adaptado al 100% de la ventana del navegador, de tres columnas equilibradas (misma altura de las tres, por el height:100%), las dos laterales con anchura fija y la central que ocupe el resto del espacio disponible.
¿Acerté, Felipe?

Mira a ver si esta composición se adapta. Elimina la #centro_izquierda y #centro_derecha y pon el ancho que necesites en #izquierda y #derecha.

También puedes realizar una búsqueda por layout 3 columnas

Un saludo

deirdre · #7 (**permalink**) 29/09/2009, 10:36

Pero veamos... tú has copiado y pegado en un html limpio lo que te he puesto arriba; porque se visualiza exactamente como has puesto en la imagen.

Bye

felipe88 · #8 (**permalink**) 29/09/2009, 10:40

Efectivamente kseso?, ahora mismo estoy viendo el material y les cuento, gracias

Saludos!

felipe88 · #9 (**permalink**) 29/09/2009, 10:44

Cita:

Iniciado por deirdre

Pero veamos... tú has copiado y pegado en un html limpio lo que te he puesto arriba; porque se visualiza exactamente como has puesto en la imagen.

Bye

Si es verdad deirdre, por ejemplo en tu código, ¿que "obliga" a que funcione la división?.

Me gustaría entender ese punto

Saludos!

felipe88 · #10 (**permalink**) 29/09/2009, 11:01

Bueno, pude encontrar que parte de lo que me ayuda a solucionar el problema es esto:

Código HTML:

#centro
        {
        width: autho; /*Usar un width automático en vez de un 100%*/
        height: 100%;
        background-color: #ffffff;    
	float: left; /*Usar en esta linea left en vez de inherit*/
    }

Cualquier duda les comentaré, muchas gracias por sus ayudas.

Saludos!

felipe88 · #11 (**permalink**) 05/10/2009, 15:29

Hola,
no habia vuelto a probar con el código y ahora lo que intento no me da literalmente.

Añadí tanto al div izquierdo como el derecho una pequeña imagen (degrade) de fondo que finalmente contrasta con el color de fondo del mismo div.

Los problemas que hasta el momento tengo es debido a que no se proporciona correctamente el ancho total de la página, parece que sobrepasa el 100% y por lo tanto es más ancha, a su vez; el div del centro no rellena completamente el espacio que posee, solo el que tiene texto; sin embargo si la escritura es muy amplia esta no respeta su distribución, por lo que toma el resto de parte derecha de la página haciendo que el div derecho baje.

Espero me halla explicado bien, espero sus consejos y comentarios, gracias.

Saludos!

felipe88 · #12 (**permalink**) 05/10/2009, 15:57

Quedo a la espera de cualquier ayuda :)

Saludos!

deirdre · #13 (**permalink**) 05/10/2009, 16:26

Hola...

Prueba esto, a ver si te sirve. Cópialo en un html limpio:

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>Tres columnas</title>
<style type="text/css">
html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
} 
#caja { 
    width: 960px;
	height: 100%;
    margin: auto;
    background-color:#ffc;
} 
#izquierdo { 
    width: 200px;
    height: 100%;
    background-color: #999; 
    float:left;
}
#central{ 
    width: 560px;
    height: 100%;
    float: left;
    background-color: #fff;
    overflow: auto;
} 
#derecho { 
    width: 200px;
    height: 100%;
    background-color: #999; 
    float:right;
}
p {
	line-height: 100px; /* sólo para probar */
	padding: 8px;
} 
</style>
</head>

<body>
<div id="caja"> 
       <div id="izquierdo"><p>Izquierdo</p></div> 
        
       <div id="central"> 
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> 
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> 
       </div>
        
       <div id="derecho"><p>Derecho</p></div>
</div>
</body>

</html>

Bye

felipe88 · #14 (**permalink**) 05/10/2009, 16:58

Hola, funciona hasta ahora, deberé probarlo con la imagen de fondo.

El valor overflow causa un efecto poco agradable al añadir una barra de desplazamiento, pero sin el, la página no muestra todo el contenido hasta el final.

Saludos!

iconogt · #15 (**permalink**) 06/10/2009, 18:51

te recomiento le des una vuelta a este sitio www.librosweb.es ;) luego me contas como te fue

kseso? · #16 (**permalink**) 07/10/2009, 05:40

Cita:

Iniciado por felipe88

Añadí tanto al div izquierdo como el derecho una pequeña imagen (degrade) de fondo que finalmente contrasta con el color de fondo del mismo div.

Los problemas que hasta el momento tengo es debido a que no se proporciona correctamente el ancho total de la página, parece que sobrepasa el 100% y por lo tanto es más ancha, a su vez; el div del centro no rellena completamente el espacio que posee, solo el que tiene texto; sin embargo si la escritura es muy amplia esta no respeta su distribución, por lo que toma el resto de parte derecha de la página haciendo que el div derecho baje.

Espero me halla explicado bien, espero sus consejos y comentarios, gracias.

Saludos!

Hola Felipe
Si estás trabajando en base al código del ejemplo que te puse en el #6, creo que has introducido elementos nuevos que seguramente serán los causantes de esos efectos no deseados (a demás de los fondos, que esos no influyen en el tamaño ni posición de las cajas).

Así que lo mejor sería que pusieses un enlace a tu página (o al menos publiques los códigos html + css).

Un saludo

hwelt · #17 (**permalink**) 16/10/2009, 17:26

y tambien publiques una imagen! a lo mejor es incompatibilidad con navegadores por eso yo siempre prefiero Firefox!

sjam7 · #18 (**permalink**) 02/11/2009, 18:12

Cita:

Iniciado por hwelt

y tambien publiques una imagen! a lo mejor es incompatibilidad con navegadores por eso yo siempre prefiero Firefox!

Ojala que todos hicieran lo mismo y solo tuvieramos que diseñar para un solo navegador, pero no, es imposible...

kadas99 · #19 (**permalink**) 02/11/2009, 18:42

mira, yo cuando deseo hacer una plantilla de 3 columnas floto todo left (Enseñanza del gran maestro "elQuique"), nada de left-inherit-right, todo left!