barra di scorrimento orizzontale oltre il punto min-width

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;

Voglio impostare una larghezza minima sulla colonna centrale in modo che non possa ridursi troppo e oltre questo punto larghezza minima, mi piacerebbe il browser per visualizzare una barra di scorrimento orizzontale anziché la colonna di destra sovrapposizione della colonna centrale.

Answer 1

Si potrebbe provare il plugin jQuery splitter. E 'quello che uso quando ho bisogno di un layout di colonna, perché fa un lavoro migliore di astraendo le differenze tra i browser di modelli CSS fare, e gestisce le barre di scorrimento in modo impeccabile.

http://methvin.com/splitter/

Answer 2

min-width non è una proprietà CSS pienamente supportato. Un modo semplice intorno a questo nella vostra situazione sarebbe quella di aggiungere semplicemente un div nella parte inferiore della colonna che ha una larghezza uguale al vostro valore minimo di larghezza.

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

Questo farà sì che la colonna non essere in grado di compattare ogni più piccolo. Speranza che aiuta!