Horizontal scroll bar past the minimum width point

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; 

I want to set the minimum width in the center column so that it cannot shrink too much and go past this minimum point of width, I would like the browser to display a horizontal scroll bar instead of the right column overlapping the center column.

Answer 1

You can try the jQuery splitter plugin. This is what I use when I need a column layout because it does a better job of abstracting browser differences than CSS templates and handles scrollbars flawlessly.

http://methvin.com/splitter/

Answer 2

min-width is not a fully supported css property. A simple way in this case would be to simply add a div at the bottom of the column with a width equal to the minimum width value.

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

This will cause the column to not be able to reduce size. Hope this helps!