barra de desplazamiento horizontal más allá del punto-min ancho

Question

HTML:

<div id="mcolWrapper">
    <div id="mcol">
      <div class="wrapper">
      content
      </div>
    </div>
</div>

<div id="lcol">
    <div class="wrapper">
    content
    </div>
</div>

<div id="rcol">
    <div class="wrapper">
    content
    </div>
</div>

CSS:

#mcolWrapper {
    float: left;
    width: 100%; }

#mcol { margin: 0 295px 0 235px; min-width: 500px; }

#lcol {
    float: left;
    width: 235px;
    margin-left: -100%; }

#rcol {
    float: left;
    width: 290px;
    margin-left: -295px;

Quiero configurar un ancho mínimo de la columna central por lo que no se puede reducir demasiado y más allá de este punto de anchura mínima, me gustaría que el navegador muestre una barra de desplazamiento horizontal en lugar de la columna de la derecha se solapan la columna central.

Answer 1

Usted podría intentar el plugin jQuery divisor. Es lo que yo uso cuando necesito un diseño de columna, ya que hace un mejor trabajo de abstraerse de las diferencias navegador plantillas CSS que hacen, y se encarga de las barras de desplazamiento sin problemas.

http://methvin.com/splitter/

Answer 2

min-anchura no es una propiedad css totalmente compatible. Una forma fácil de solucionar esto en su situación sería simplemente añadir un div en la parte inferior de la columna que tiene una anchura igual a su valor mínimo ancho.

<div id="mcol">
  ...
  <div style="width:500px;"></div>
</div>

Esto hará que la columna a no ser capaz de reducir el tamaño ni más pequeños. Esperamos que ayuda!