internet explorer - tabla - CSS: dos columnas de fluido al 50% que no respetan el ancho mínimo
tablas en html ejemplos (8)
Estoy intentando usar este diseño con dos anchos de columna del 50%. Pero parece que cuando las columnas de la derecha alcanzan su ''min-ancho'', van por debajo de la columna de la izquierda. ¿Hay alguna manera de utilizar la técnica ''shim'' para establecer un min-width para el contenedor para que ambas columnas dejen de cambiar el tamaño. Por lo tanto, eliminando el problema de que la columna de la derecha se encuentre debajo de la columna de la izquierda.
Mi página es la siguiente.
<style type="text/css">
#left {
float: left;
width: 50%;
}
.minwidth {
width: 500px;
height: 0;
line-height: 0;
}
</style>
<div id="wrapper">
<div id="left">
left
</div>
<div id="right">
right
</div>
<div class="minwidth"> </div>
</div>
El problema con eso es que la columna de la izquierda dejará de cambiar el tamaño, pero la columna de la derecha irá debajo de la columna de la izquierda y seguirá cambiando de tamaño. Básicamente, el efecto que quiero es que una vez que el ancho de las envolturas sea más bajo, que las columnas izquierda y derecha también detengan el cambio de tamaño. Poner la cuña en las columnas izquierda y derecha tampoco funcionó.
¿Hay posiblemente otra forma de ir a obtener dos columnas con un ancho del 50% y usar un calce para establecer correctamente un ancho mínimo?
Gracias.
Editar: El espacio en blanco en la clase de minwidth es en realidad & nbsp pero se convirtió. ;)
Este es un intento rápido pero funciona (solo probado en Firefox):
<head>
<style type="text/css">
#left {
float: left;
width: 50%;
}
.minwidth {
min-width: 500px;
background:#eee;
height: 0;
overflow:visible;
}
.col{
min-width:250px;
background:#eaa;
}
</style>
</head>
<body>
<div id="wrapper" class="minwidth">
<div id="left" class="col">
left
</div>
<div id="right" class="col">
right
</div>
<div><!-- Not needed --></div>
</div>
</body>
Prueba esto por el estilo:
.left, .right { width:50%; float: left; }
.right { float: right; }
.minwidth { min-width: 500px; display: block; height: 0; clear: both; }
Prueba esto:
<html>
<head>
<title>Testing some CSS</title>
<style type="text/css">
.floatme {
float: left;
width: 50%;
}
.minwidth {
width: 500px;
height: 0;
line-height: 0;
clear: both;
}
</style>
<body>
<div id="wrapper">
<div class="floatme">
left
</div>
<div id="floatme">
right
</div>
<div class="minwidth"> </div>
</div>
</body>
</html>
Simplemente configure un ancho mínimo para el contenedor y simplemente cambie las columnas izquierda y derecha a porcentajes. Esto evitará que sus dos columnas sean empujadas hacia adentro / sobre / debajo una de la otra.
Use una tabla de 2 columnas. Hará exactamente lo que quieras. Se supone que las Div solo se utilizan para dividir bloques lógicamente distintos, y las tablas están ahí para diseñar datos en columnas. Si desea dos columnas, use una tabla, en lugar de tratar de obligar a Div''s a comportarse como una tabla.
Pude proponer una solución "sin tablas HTML requeridas" basada en una técnica de Stu Nicholls en CSS Play y personalmente me gusta porque no solo funciona en IE6 + y FF2 +, también es válida CSS que no funciona requiere cualquier hacks. Para mi argumento sobre por qué un diseño basado en CSS es preferible a las tablas HTML, consulte a continuación.
Primero, recomiendo que al diseñar nuevas páginas con CSS lo haga con el modo de navegador compatible con los estándares . Para obtener una explicación sobre el modo peculiar y el modo compatible con los estándares, consulte este artículo de uno de mis sitios favoritos de recursos de CSS. Todo lo que tiene que hacer es agregar un elemento DOCTYPE específico en la parte superior de sus páginas. El CSS se verá obligado a procesar en modo compatible con estándares, lo que dará como resultado menos errores e idiosincrasias del navegador. En el caso de que no pueda cambiar al modo compatible con los estándares, existe una solución de mínimo ancho para los navegadores en el modo peculiar, también disponible en CSS Play.
En segundo lugar, debe agregar un contenedor adicional alrededor de su marcado existente. Este contenedor se usa para establecer el ancho mínimo para buscadores que entienden min-width (no IE). A continuación, puede utilizar el truco * html para dirigirse específicamente a IE 6 y aplicar la técnica de Stu Nicholl a los contenedores internos. La técnica se detalla aquí y el ejemplo específico utilizado es "# 2 para IE de modo compatible con estándares":
http://www.cssplay.co.uk/boxes/minwidth.html
El resultado final es bastante simple. Crea 2 columnas al 50% utilizando la técnica de estilo ALA de 2 columnas mencionada en la pregunta original, que tienen un ancho mínimo general (de 500px en este ejemplo) donde las columnas dejan de redimensionar y la columna derecha no cae debajo de la columna izquierda. ¡Espero que esto ayude!
Editar: esta misma técnica se puede usar para aplicar min-ancho compatible con varios navegadores a cualquier cosa. Por ejemplo, las columnas no necesitan ser del 50% cada una y se puede usar cualquier cantidad de columnas. http://www.glish.com/css/ es un gran recurso para diseños de página basados en CSS y cuando se combina con esta técnica de min-width hay muchos diseños agradables que se pueden crear con CSS mínimo y válido.
<!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">
/* For browsers that understand min-width */
.width {
width: 100%;
min-width: 500px;
}
/* IE6 Only */
* html .minwidth {
border-left: 500px solid white;
position: relative;
float: left;
}
/* IE6 Only */
* html .wrapper {
margin-left: -500px;
position: relative;
float: left;
}
.left {
float: left;
width: 50%;
}
.right {
float: left;
}
</style>
</head>
<body>
<div class="width">
<div class="minwidth">
<div class="wrapper">
<div class="left">
Left
</div>
<div class="right">
Right
</div>
</div>
</div>
</div>
</body>
</html>
Ahora, mi incentivo para configurar una cuenta de fue poder responder a la siguiente sugerencia que "Si quieres dos columnas, utiliza una tabla, en lugar de tratar de obligar a Div''s a comportarse como una tabla". Como soy muy nuevo para comentar o votar a favor, estoy incrementando esta discusión.
De Verdad?
Alguien hace una pregunta acerca de los diseños basados en CSS y respondes diciéndoles que usen tablas HTML.
Permítanme comenzar diciendo que no creo que las tablas HTML sean completamente innecesarias. De hecho, cada vez que necesito mostrar datos tabulares, es decir , datos relacionales , utilizo una tabla HTML. Las propiedades de visualización de tabla CSS aún no son totalmente compatibles (¡próximamente en IE8!) Y el uso de una tabla HTML de un solo nivel es una solución efectiva. Mire el marcado de cualquiera de las páginas web de Google y verá que estarán de acuerdo.
Como alguien que ha dedicado una gran cantidad de tiempo a escribir diseños basados en CSS que son compatibles con varios navegadores cuando podrían haberlo hecho en 10 minutos con una tabla, acepto que hay una solución más fácil para este problema. Sin embargo, solo porque pueda usar dinamita para renovar su cocina, no significa que deba hacerlo. El siguiente artículo proporciona una explicación detallada de por qué los diseños basados en CSS son más deseables.
Bueno, no quiero entrar en un argumento político, pero el razonamiento en el artículo citado de Agoudzward sobre "por qué CSS es mejor que las tablas" tiene poco que ver con las tablas. Lo que demuestra es que CSS es mejor que usar etiquetas de fuente individuales y configuraciones de color y similares una y otra vez cuando muchos elementos de página piden el mismo estilo. Sí, estoy absolutamente de acuerdo en que si tienes cien elementos en una página que deberían estar en texto Arial de 14 pt verde, entonces tiene sentido crear un estilo CSS para esto en lugar de copiar y pegar una etiqueta de fuente una y otra vez por todas las razones que dan. Eso se duplica si quieres este mismo estilo en varias páginas.
Pero, ¿qué tiene eso que ver con las tablas?
El razonamiento parece ser "CSS es bueno porque te permite especificar la fuente y el color una vez en lugar de varias veces, por lo tanto, cualquier cosa que se pueda hacer con CSS es mejor que cualquier alternativa posible". Bueno, eso no sigue en absoluto! El hecho de que una herramienta sea buena para un tipo de problema no significa que sea buena para todos los problemas posibles. Los martillos son geniales para poner las uñas. Eso no quiere decir que los use para poner tornillos. Si puedo hacer un diseño más simple y lógico con las tablas que con las etiquetas div y CSS, entonces insistir en que debería usar CSS porque "CSS es bueno" me deja diciendo, ¿y qué?
Aquí hay un buen ejemplo de lo que deseas, creo.
http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm
En resumen, aquí está el CSS:
/* Start of Column CSS */
#container2 {
clear:left;
float:left;
width:100%;
overflow:hidden;
background:#ffa7a7; /* column 2 background colour */
}
#container1 {
float:left;
width:100%;
position:relative;
right:50%;
background:#fff689; /* column 1 background colour */
}
#col1 {
float:left;
width:46%;
position:relative;
left:52%;
overflow:hidden;
}
#col2 {
float:left;
width:46%;
position:relative;
left:56%;
overflow:hidden;
}
Aquí está el html:
<div id="container2">
<div id="container1">
<div id="col1">
<!-- Column one start -->
<h2>Equal height columns</h2>
<p>It does not matter how much content is in each column, the background colours will always stretch down to the height of the tallest column.</p>
<h2>Valid XHTML strict markup</h2>
<p>The HTML in this layout validates as XHTML 1.0 strict.</p>
<!-- Column one end -->
</div>
<div id="col2">
<!-- Column two start -->
<h3>Windows</h3>
<ul>
<li>Firefox 1.5, 2 & 3</li>
<li>Safari</li>
<li>Opera 8 & 9</li>
<li>Explorer 5.5, 6 & 7</li>
<li>Google Chrome</li>
<li>Netscape 8</li>
</ul>
<!-- Column two end -->
</div>
</div>
</div>