Maquetar 3 columnas

Gabriel22 · #1 (**permalink**) 20/03/2006, 20:46

No dejo código porque terminé borrando todo lo que habia hecho, frustrado por no conseguir el resultado que buscaba.
Lo que pido es si alguien sabe y puede publicar enlaces sobre algun buen artículo sobre como maquetar un diseño de este tipo:

Código PHP:

  Encabezado 
 
Columna1 Columna2 Columna3 
 
Pie

Los que encontré que cumplen con esto no tienen en cuenta el tamaño del contenido de los bloques y generalente se desbordan si este es muy extenso.

Gracias de antemano.

braulito · #2 (**permalink**) 20/03/2006, 21:56

Aca tienes varios layouts de 2 o 3 columnas con CSS según la necesidad que tengas:

http://blog.html.it/layoutgala/

Gabriel22 · #3 (**permalink**) 20/03/2006, 22:34

Muchas gracias, este es el que más se ajusta lo que quiero:

http://blog.html.it/layoutgala/LayoutGala08.html

El único problema es el alto de las columnas...se podría hacer que las otras 2 se auto-ajusten al height de la que tiene mayor altura?

Gabriel22 · #4 (**permalink**) 24/03/2006, 16:57

Se entiende? Lo que busco es que las 3 columnas queden siempre con 100% de altura, es decir que la que lleve mas contenido marcará el alto y las otras 2 se deberian ajustar a eso.

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>No va ni para atras</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">

html,body{margin:0;padding:0;height:100%;}


#container{width:700px;margin:0 auto;text-align:left;height:100%;}


div#wrapper{float:left;width:100%;}

#right{background: red;float:left;width:150px;margin-left:-150px;min-height:100%;}
#left{background: blue;float:left;width:150px;margin-left:-700px;min-height:100%;}
#content{line-height:1.4;background: yellow;margin: 0 150px;min-height:100%;}
#footer{background: #333;color: #FFF;clear:left;width:100%;}
#header { height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color: #79B30B}




</style>



</head>
<body>
<div id="container">
<div id="header"><h1>header</h1></div>
<div id="wrapper">

<div id="content">
Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido Contenido 
</div>
</div>
<div id="right">
right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right 
</div>
<div id="left">
left left left left left left left left left left left left left left left left left left left left left left left left 
</div>
<div id="footer"><p>footer</p></div>
</div>
</body>
</html>

SiR.CARAJ0DIDA · #5 (**permalink**) 24/03/2006, 17:51

eso lo hago con javascript en mi pagina: www.torneosnydus.com, cuando se carga la pagina llamo a esta funcion que me iguala la altura de las 2 columnas.

Código:

function adjust_cols()
{
	// ajusta a la misma medida las 2 columnas del index
	var c1 = document.getElementById('menuIZQ'); // contenedor columna izq
	var c2 = document.getElementById('panel_derecho'); // contenedor columna derecha
	var ob1 = document.getElementById('expand_content_c1'); // id del elemento que se va a expander de la col izq
	var ob2 = document.getElementById('expand_content_c2'); // id del elemento que se va a expander de la col der
        var dif;
	if (c1.offsetHeight > c2.offsetHeight)
	{
		dif = c1.offsetHeight - c2.offsetHeight;
		ob2.style.height = ob2.offsetHeight + dif + 'px';
	}else{
		dif = c2.offsetHeight - c1.offsetHeight;
		ob1.style.height = ob1.offsetHeight + dif + 'px';
	}
}

Gabriel22 · #6 (**permalink**) 24/03/2006, 18:24

Gracias por el aporte.
Alguien sabe como solucionarlo usando solo CSS?

braulito · #7 (**permalink**) 26/03/2006, 18:42

Solo con CSS.. crea una imagen de fondo que tome los 3 colores suponiendo que existe un div contenedor de tus 3 columnas que se llame main, éste tendría el fondo de los 3 colores, algo asi:

Código:

#main {
  background: url('fondo3colores.gif') repeat-y;
}

y cada vez que crezca cualquier contenido, el fondo se repite hacia abajo y no hay problema

kemie · #8 (**permalink**) 27/03/2006, 03:21

http://www.redmelon.net/tstme/3cols2/
http://www.positioniseverything.net/...rs-center.html
http://www.positioniseverything.net/...ut/equalheight

alguno de esos te debe servir

Pablo Castrillo · #9 (**permalink**) 18/04/2006, 09:44

Hola. Tengo la misma duda que nos plantea Gabriel y he estado mirándome los enlaces de kemie (muy buenos).

Pero en mi caso, los divs tienen que ser transparentes, y no soy capaz de hacerlo siguiendo esos tutoriales.

¿Alguien sabe como solucionar esto?

Venga, un saludo a todos y gracias.