Горизонтальная полоса прокрутки мимо мин-ширина точки

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; 

Я хочу, чтобы установить минимальную ширину на центральной колонке, поэтому он не может сжать слишком много, и мимо этого минимума точки ширины, я бы хотел, чтобы браузер отображал горизонтальную полосу прокрутки, а не правый столбец, перекрывающий центральный столбец.

Answer 1

Вы можете попробовать плагин сплитера jQuery. Это то, что я использую, когда мне нужен макет столбца, потому что он лучше справляется с абстрагированием различий браузера, чем CSS-шаблоны, и безупречно обрабатывает полосы прокрутки.

http://methvin.com/splitter/

Answer 2

min-width не полностью поддерживается свойство css. Простым способом в этой ситуации было бы просто добавить div в нижней части столбца с шириной, равной минимальной ширине.

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

Это приведет к тому, что столбец не сможет уменьшить размер. Надеюсь, это поможет!