CSS: Dos columnas de fluido al 50% que no respetan el ancho mínimo

Estoy tratando de usar el diseño this 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 ancho mínimo 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.CSS: Dos columnas de fluido al 50% que no respetan el ancho mínimo

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">&nbsp;</div> 
</div>

El problema con esto es la columna de la izquierda se detendrá el cambio de tamaño, pero la columna de la derecha esté por debajo de la columna de la izquierda y seguir el cambio 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ó.

¿Existe posiblemente otra forma de obtener dos columnas con un ancho del 50% y utilizar 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ó. ;)

Fuente

2008-10-10 Mike

qué sucede en todos los navegadores? Tengo un diseño de portal que se ve afectado por IE porque ignora minwidth. –

Traté de cambiarlo a & nbsp; pero al analizador no le gustó eso. Parece un error en StackOverflow. – Neall

Ed.T: Solo en IE, creo. – Mike

yo era capaz de llegar con un "no tablas HTML necesarias" solución 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 un CSS válido que no requiere ningún ataque. Para mi argumento sobre por qué un diseño basado en CSS es preferible a las tablas HTML, consulte a continuación.

En primer lugar, le recomiendo que cuando diseñe páginas nuevas con CSS lo haga con según el modo de navegador. Para obtener una explicación sobre el modo peculiar y el modo compatible con los estándares, consulte this article desde uno de mis sitios de recursos de CSS favoritos. 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 los estándares de modo compatible con IE":

http://www.cssplay.co.uk/boxes/minwidth.html

El resultado final es bastante simple. Crea 2 columnas del 50% utilizando la técnica 2-column ALA style 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 utilizar 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 ancho mínimo, 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 la creación de una cuenta de desbordamiento de pila fue poder responder a la sugerencia a continuación que "Si quieres dos columnas, utilizar una tabla, en lugar de tratar de forzar Div de 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 sobre los diseños basados en CSS y usted responde diciéndoles que use 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 usar 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 crear diseños basados en CSS 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.

http://www.chromaticsites.com/web-design-blog/2008-04-03/13-reasons-why-css-is-superior-to-tables-in-website-design/

Fuente

2008-10-23 15:21:12 adgoudz

Esto funciona bien, pero sólo mientras la columna de la derecha contiene una pequeña cantidad de datos. Una vez que tenga un poco más de contenido en la columna de la derecha, se envuelve. – Mat

-4

Utilice 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.

Fuente

2008-10-10 14:16:46

¿Las columnas izquierda y derecha no son bloques distintivos? Mi propósito es usarlo como un diseño y no para mostrar datos tabulares. Publica de nuevo si estoy completamente equivocado. ;) Gracias. – Mike

Desea un diseño de dos columnas, por lo que su diseño es tabular. Como era de esperar, una mesa es la mejor opción para obtener el diseño que desea. –

No se preocupe, David, te entiendo. Demasiado amor por el diseño exclusivo de CSS hoy en día. –

probar esto por el estilo:

.left, .right { width:50%; float: left; } 
.right { float: right; } 
.minwidth { min-width: 500px; display: block; height: 0; clear: both; }

Fuente

2008-10-10 14:20:38

Excelente, parece funcionar bien a diferencia de algunas de las otras sugerencias. Bueno, al menos en Firefox. No funciona bastante en IE. – Mat

acaba de establecer un ancho mínimo de la envoltura y sólo cambiar las columnas izquierda y derecha a porcentajes. Esto evitará que sus dos columnas sean empujadas hacia adentro/sobre/debajo una de la otra.

Fuente

2008-10-10 14:21:46

Este es un intento rápido, pero funciona (sólo 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>

Fuente

2008-10-10 14:22:57 slashnick

En Firefox, una columna derecha más larga sangra hacia la izquierda para llenar todo el ancho. :( – Mat

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>

Fuente

2008-10-10 14:27:17 willasaywhat

En Firefox, una columna de la derecha ya sangra hacia la izquierda para ocupar todo el ancho. :( – Mat

Bueno, no quiero entrar en una discusión política, pero el razonamiento en el artículo citado por 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 le permite especificar la fuente y el color una vez en lugar de repetidamente, por lo tanto, todo lo que se puede 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é?

Fuente

2009-10-14 14:10:19 Jay

Aquí es un buen ejemplo de lo que usted desea que pienso.

http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm

En resumen aquí es 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í es 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 &amp; 3</li> 
       <li>Safari</li> 
       <li>Opera 8 &amp; 9</li> 

       <li>Explorer 5.5, 6 &amp; 7</li> 
       <li>Google Chrome</li> 
       <li>Netscape 8</li> 
      </ul> 


      <!-- Column two end --> 
     </div> 
    </div> 
</div>

Fuente

2009-10-25 22:41:55

CSS: Dos columnas de fluido al 50% que no respetan el ancho mínimo

Respuesta

Cuestiones relacionadas