Ayuda con columnas opcionales CSS

quebien · #1 (**permalink**) 10/09/2009, 18:59

Hola a todos,

Tengo un problema que me esta volviendo loco.

Tengo una estructura de pagina con encabezado, columna izquierda, contenido, columna derecha y el pie.

El asunto es que quiero que desde PHP pueda elegir que columna muestro (la izq, la derecha o las dos) o que no muestre ninguna de las dos columnas, y el contenido debe acomodarse para ocupar todo el ancho.

Hice este código, pero cuando el contenido es muy grande se cae, además las columnas no ocupan todo el alto como quiero:

Código HTML:

<html>
<head>
	<style>
	HTML { 
		padding: 0;
		width: 100%;
		height: 100%;
	}

	BODY {
		margin: auto;
		padding: 0;
		width: 100%;
		height: 100%;
	}

	#contenedor{
		width: 760px;
		margin: 0 auto;
		position: relative;
		display: block;
		min-height: 608px;
		height: auto!important;
		background-color: #3F3F3F;
	}

	#encabezado{
		height: 85px;
		position: relative;
		background-color: #171717;
	}

	#contenido{
		position: relative;
		float: left;
		height: auto!important;
		min-height: 503px;
		height: 506px;
	}

	#columna_izq{
		float: left;
		position: relative;
		height: auto;
		width: 180px;
		min-height: 500px;
		background: #232323;
	}

	#columna_der{
		float: right;
		position: relative;
		min-height: 500px;
		height: auto;
		width: 180px;
		background: #232323;
	}
		
	#pie{
		width: 100%;
		position: absolute;
		bottom: 0;
		text-align: center;
		height: 25px;
		line-height: 25px;
		clear: both;
		color: #999999;
		background: #1D1D1D;
	}
	</style>
</head>
<body>

	<div id="contenedor">

		<div id="encabezado">
			encabezado
		</div>

		<div id="columna_izq">
			col izq
		</div>

		<div id="contenido">
			contenido contenido contenido contenido contenido contenido contenido contenido contenido contenido contenido contenido contenido contenido 
		</div>

		<div id="columna_der">
			col der
		</div>

		<div id="pie">
		 pie
		</div>

	</div>

</body>
</html>

Si me puden dar una pista lo agradeceria :)

Gracias por adelantado!

mayid · #2 (**permalink**) 11/09/2009, 08:47

Quizas el height: auto; pueda ir como height: 100%; siempre y cuando todos los contenedores que tenga ese sector, hasta llegar a body, tambien tengan declarado height: auto;

Que es caerse?

jomaruro · #3 (**permalink**) 12/09/2009, 06:54

Hola:

Cita:

Iniciado por mayid

Que es caerse?

Según el diccionario de la Real Academia:

caer: Dicho de un cuerpo: Moverse de arriba abajo por la acción de su propio peso, entre otras definiciones.

Yo interpreto que algunos div en lugar de colocarse en su sitio, se "caen" y se colocan debajo.

Saludos.

kseso? · #4 (**permalink**) 12/09/2009, 08:01

Hola Quebien.

Creo que tu consulta y la de este otro tema es básicamente lo mismo.

Mira a ver si mi aporte al mismo te es de ayuda.

Un saludo.

P.D.: tampoco tengo claro el "caerse"