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
