Setting Min-Width on IE6 (IE Hack)

There are circumstances that you would like to setup a minimum width of your content so that when user reduce their window, your content width will not shrink below that width. Unfortunately, there is bug on IE 6 where min-width is not supported. There is a work around on this bug.

Getting this to work in IE6 takes some extra effort! To start you will need to create 2 divs, one embedded in the other.

<div class=”container”>
<div class=”holder”>Content</div>
</div>

Then you will need the min-width which goes on the outer div.

.container {
min-width:300px;
}

Now this is where the IE hack comes into play. You will need to include the following code.

* html .container {
border-right: 300px solid #FFF;
}

* html .holder {
display: inline-block;
position: relative;
margin-right: -300px;
}

As the browser window is resized the outer div width reduces to suit until it shrinks to the border width, at which point it will not shrink any further. The holder div follows suit and also stops shrinking. The outer div border width becomes the minimum width of the inner div.