tablas - tamaño de una tabla html
3 columnas: una con ancho máximo, otras dos con ancho mínimo (3)
Tres columnas deben llenar el ancho del contenedor principal. El ancho de las columnas izquierda y derecha no debe ser menor que 150px. La columna central no debe ser mayor que 200px de ancho.
Hice una página de referencia que usa JavaScript para hacer el diseño. ¿Es posible hacer el mismo diseño con CSS puro?
captura de pantalla http://elv1s.ru/files/html+css/min-width_max-width_columns.png
Debería funcionar al menos en IE 8, Firefox 3.6, Chrome 7, Safari 5 y Opera 10.63.
No soy un experto, sin embargo, estoy bastante seguro de que si la respuesta es sí, está en esta página:
Esa página (y todo el sitio) es brillante: muestra cómo lograr muchos diseños diferentes (usando solo CSS) y explica exactamente cómo y por qué funcionan. Incluso si esa página no contiene un diseño que le convenga, existe una buena posibilidad de que la página le brinde una idea aproximada del enfoque que debe tomar.
Además, ¡buena suerte!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#container { max-width:960px; width:100%; min-width:400px; overflow:auto;}
#aside { height:300px; width:40%; min-width:150px; float:left; background-color:grey; }
#primary { height:300px; width:20%; max-width:200px; float:left; background-color:red; }
#secondary { height:300px; width:40%; min-width:150px; float:right; background-color:grey; }
</style>
</head>
<body>
<div id="container">
<div id="aside">Leftmost content</div>
<div id="primary">Primary content</div>
<div id="secondary">Secondary content</div>
</div>
</body>
</html>
Un par de cosas sobre este diseño:
- Especifiqué la altura y el fondo solo para fines de visualización.
- El desbordamiento automático está en el elemento que contiene para limpiar los flotadores; aunque puedes usar un div más claro también.
- El contenedor tiene un ancho fluido, pero está al máximo en 960. Elijo este número arbitrariamente, pero es una buena idea maximizar el ancho del fluido antes de que las líneas de texto se vuelvan demasiado largas.
- Si mantiene fluido el contenedor, el diseño se romperá si la ventana gráfica es lo suficientemente pequeña. EDITAR: Agregué un ancho mínimo de 400 px al contenedor, esto debería solucionar el problema .
Además, me gustaría echar un vistazo a http://www.alistapart.com/articles/holygrail/ . Aunque es un artículo que detalla un diseño de tres columnas fijas de fluido fijo, creo que hay algunas ideas que podría utilizar para mejorar mi diseño, si así lo desea.
Solución basada en tablas de @PanyaKor .