3 columnas sin descuadrar en 800x600 y que la columna derecha se estire al 100%

kahlito · #1 (**permalink**) 24/03/2006, 13:55

Hola.

Estoy intentando pasar a maquetar de medidas absolutas a relativas y la verdad es que me está constando bastante

, de ahí que esté intentando poner un diseño de 3 columnas así:

- izquierda 150px de ancho
- centro 620px de ancho
- derecha 100 % a estirar

Lo he intentando de muchas formas y solo lo consigo con dimensiones absolutas, sin embargo con medidas relativas no consigo que se estire el bloque derecho al 100% o a veces al pasar a una resolución de 800 x 600 o bien se me desplaza el centro o la derecha hacia abajo y se descuadra todo. Ejemplos:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<title>Probando 3 columnas</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html,body{
background-color: #FF6666;
margin:0;
padding:0;}
#izquierda{
float:left;
background-color:#333399;
width:150px;
height:600px;
}
#contenido{
background-color: #99CC33;
	width:620px;
	height:600px;
	float:left;
	}
#derecha{
background-color: #6699CC;
height:600px;
float:left;
}
</style>
</head>

<body>
<div id="izquierda">Izquierda</div>
<div id="contenido">Contenido</div>
<div id="derecha">Derecha</div>

</body>
</html

Otra intentando con medidas relativas:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<title>Probando 3 columnas</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html,body{
background-color: #FF6666;
margin:0;
padding:0;}
#izquierda{
position:relative;
left:0px;
float:left;
background-color:#333399;
width:150px;
height:600px;
}
#contenido{
position:relative;
	background-color: #99CC33;
	width:620px;
	height:600px;
	left:0px;
	float:left;
	}
#derecha{
position:relative;
background-color: #6699CC;
height:600px;
right:0px;
float:right;
}
</style>
</head>

<body>
<div id="izquierda">Izquierda</div>
<div id="contenido">Contenido</div>
<div id="derecha">Derecha</div>

</body>
</html>

Tambien he probado de otras formas... pero no lo consigo por ahora, ¿alguna recomendación o fallos que tengo?, gracias

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

a ver esto

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<title>Untitled</title>

    <style type="text/css">
        BODY	{
        	margin:10px;
		}
		DIV	{
			margin:0 auto;
			padding:0;
		}
		#left	{
			width:150px;
			height:300px;
			border:1px solid #000;
			float:left;
		}
		#center	{
			width:620px;
			height:300px;
			border:1px solid #000;
			float:left;
		}
		#right	{
			margin-left:774px;
			height:300px;
			border:1px solid #000;
		}
    </style>

</head>

<body>
<div id="main">
	<div id="left"></div>
	<div id="center"></div>
	<div id="right"></div>
</div>
</body>

</html>

kahlito · #3 (**permalink**) 26/03/2006, 07:26

Hola SiR.CARAJ0DIDA, gracias por tu ejemplo pero me sigue pasando lo mismo que al bajar a una resolución como 800x600 el bloque del centro se viene abajo.

Con posiciones absolutas siempre me ha funcionado bien, sin embargo de esta nueva manera no logro hacerlo solido...