Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de 3 columnas sin descuadrar en 800x600 y que la columna derecha se estire al 100% en el foro de CSS en Foros del Web. Hola. Estoy intentando pasar a maquetar de medidas absolutas a relativas y la verdad es que me está constando bastante , de ahí que esté ...
  #1 (permalink)  
Antiguo 24/03/2006, 13:55
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
3 columnas sin descuadrar en 800x600 y que la columna derecha se estire al 100%

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
  #2 (permalink)  
Antiguo 24/03/2006, 17:59
Avatar de SiR.CARAJ0DIDA  
Fecha de Ingreso: junio-2004
Ubicación: Acá
Mensajes: 1.166
Antigüedad: 13 años, 5 meses
Puntos: 4
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>
__________________
Internet Explorer SuckS
Download FireFox
  #3 (permalink)  
Antiguo 26/03/2006, 07:26
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
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...
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:40.