Hola,
he probado ya varias "soluciones" que he encontrado por internet pero no consigo arreglarlo de ninguna forma.
Lo que necesito hacer es una web con 3 columnas, dos pequeñas a los laterales (de color rojo) y una grande en el centro. Lo mas importante es que la columna centrar nunca se haga mas pequeña de unos 780 u 800px. pero si debe expandirse si la resolucion de pantalla es mayor.
Las 3 columnas deberian quedarse en la misma linea, viendose una columna pequeña de color rojo a la izquierda, una grande de color blanco en el centro y otra pequeña de color rojo a la derecha.
Viendolo maximizado no tengo ningun problema, pero cuando hago la ventana mas pequeña necesitaria que apareciese un scroll horizontal y que la columna centrar no se haga mas pequeña de 800px.
Probe a hacerlo con por porcentajes, con las columnas pequeñas al 11% y la central al 78%, pero no conseguí establecer el tamaño minimo de ancho a la columna central.
Os pongo el codigo por si alguien lo puede mirar un poco o si alguien tiene alguna idea.
Un saludo y gracias por anticipado
HTML
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Web</title>
<link href="estilos.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="web">
<div id="back_left"></div>
<div id="content"></div>
<div id="back_right"></div>
</div>
</body>
</html>
Código:
* {
margin:0;
padding:0;
border:0;
}
html {
margin:0;
padding:0;
border:0;
width:100%;
height:100%;
}
body {
height:100%;
}
#web {
width:100%;
min-width:1024px;
height:100%;
margin:0;
padding:0;
border:0;
}
#back_left{
width:11%;
min-width:110px;
height:100%;
float:left;
margin:0;
padding:0;
border:0;
background-color:#FF0000;
}
#back_right{
width:11%;
min-width:110px;
height:100%;
float:right;
margin:0;
padding:0;
border:0;
background-color:#FF0000;
}
#content {
min-width:790px;
width:78%;
height:500px;
float:left;
margin:0;
padding:0;
border:0;
}