barra de deslocamento horizontal para além do ponto min de largura

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;

Eu quero definir uma largura mínima na coluna central para que ele não pode encolher muito e passado este largura mínima ponto, eu gostaria que o navegador para exibir uma barra de rolagem horizontal em vez da coluna da direita sobreposição da coluna central.

Answer 1

Você poderia tentar o divisor plugin jQuery. É o que eu uso quando eu preciso de um layout de coluna, porque ele faz um trabalho melhor de abstrair as diferenças navegador do que modelos CSS fazer, e ele lida com as barras de rolagem na perfeição.

http://methvin.com/splitter/

Answer 2

min-width não é uma propriedade css totalmente suportado. Uma maneira fácil em torno deste em sua situação seria a de simplesmente adicionar um div na parte inferior da coluna que tem uma largura igual à sua largura mínima de valor.

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

Isto fará com que a coluna para não ser capaz de encolher qualquer menor. Espero que ajude!