html - pantalla - max-width que es
diseño css ancho fijo y ancho variable en la misma línea (5)
Esta herramienta ayuda a generar columnas fijas líquidas fácilmente.
con las tablas puedo tener fácilmente una fila con 2 columnas, la columna 1 tiene un ancho variable y la columna 2 tiene un ancho fijo en píxeles y la columna 1 cambia de tamaño para llenar el espacio disponible. Estoy haciendo la transición a css y me pregunto cómo hacerlo con css ... y asegúrate de que ambas divs / columnas permanezcan en la misma línea y no se ajusten.
Los flotadores con anchos explícitos son prácticamente la forma estándar de lograr esto hoy en día (debido a la limitada disposición del diseño en CSS1 / CSS2), también puede usar el bloque en línea, pero simplemente terminará siendo más trabajo. No se olvide de contener los flotantes en el padre con desbordamiento: oculto y una propiedad que activa hasLayout como ancho.
Supongo que lo que necesita aquí es un diseño de página de 2 columnas. En teoría, podría usar display: table pero si necesita admitir cualquier versión de IE, esa no es realmente una opción.
Esta es una de las cosas más difíciles que hemos encontrado al cambiar de tablas a CSS, pero afortunadamente para usted, hemos estado haciendo esto durante más de 5 años y creo que puede encontrar una solución para cada problema. Tal vez usted quiera revisar este artículo clásico: Columnas de Faux
Por favor, no se desanime, CSS solo es difícil los primeros meses, y después de eso podrá diseñar cualquier cosa de una manera muy limpia, simple, semántica y estándar.
HTML
<div class="wrapper">
<div class="fixed">fixed</div>
<div class="variable">variable</div>
</div>
CSS
.wrapper {
display: flex;
align-items: stretch;
flex-flow: row nowrap;
justify-content: space-between;
}
.fixed {
min-width: 200px;
width: 200px;
}
.variable {
width: 100%;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
html, body, div { margin: 0; padding: 0; border: 0 none; }
#left { margin-right: 300px; background: yellow; }
#right { width: 300px; float: right; background: #ccc; }
</style>
</head>
<body>
<div id="wrapper">
<div id="right">Fixed</div>
<div id="left">Variable</div>
</div>
</body>
</html>
Esto tiene una columna derecha de 300 píxeles y una columna izquierda variable. El DOCTYPE está justo ahí para hacer que IE se comporte menos. También se recomienda el uso de un restablecimiento de CSS .