Cita:
Iniciado por pixel1 
Hola estoy maquetando un proyecto a 3 columnas, el punto es que necesito que la columna central siempre tenga un tamaño fijo: 1024px y las columnas izquierdas y dercha se puedan estirar dependiendo la resolucion; estoy haciendo una prueba así.
Código HTML:
<div id="container1">
<div id="col1">Column 1</div>
<div id="col2">Column 2</div>
<div id="col3">Column 3</div>
</div> Con el siguiente css:
Código HTML:
#container1 {
float:left;
width:100%;
}
#col1 {
float:left;
width:30%;
background:red;
}
#col2 {
float:left;
width:40%;
background:yellow;
}
#col3 {
float:left;
width:30%;
background:green;
}
El problema es que como todas las columnas están definidas en porcentaje, si cambio la resolucion entonces todo crece en proporcion.
no se puede usar los tamaño que quieres, en una laptop no se va a ver bien, ni en una pantalla de oficina, solo ve va a ver bien en una pantalla de un diseñador.
el estandar de ancho es 1024 y eso descuentale es scroll ponle 980.
lo que podrías hacer si quieres ocupar toda la pantalla
ponerle algo parecido a esto:
<!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=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
html , body{ margin:0; width:100%;}
#contenedor{width:100%; background-color:#F00; min-width:1000px;}
.flotante{float:left;}
.limpiar{clear:both;}
#izquierda{
width:30%;min-width:300px;}
#centro{
width:40%;min-width:400px;}
#izquierda{ background-color:#0F0;}
#centro{ background-color:#03C;}
#derecha{ background-color:#CF0; width:30%;}
</style>
</head>
<body>
<div id="contenedor">
<div class="flotante" id="izquierda">contenido izquierda</div>
<div class="flotante" id="centro">contenido centro</div>
<div class="flotante" id="derecha">contenido derecha </div>
<div class="limpiar"></div>
</div>
</body>
</html>