This has been the age old problem of creating minimum width in IE without using longwinded javascript. Now there maybe some javascript lovers out there and you will all know by now that I am a bit of a purist and try it the css way.

The trick in this little exercise is to use two <div> containers. The first one called outer and the second one calledinner. You can call them what you like.

Now the outer div has the following attributes...for compliant browsers:
<pre>.outer {
position:relative;
width:90%;
min-width:400px;
background-color: #FFFFFF;
}
.inner {
display:block;
color:#FFFFFF;
background-color: #000066;
}
</pre>

and none compliant:
<pre>* html .outer {border-right:400px solid #000000;}
* html .inner {display:inline-block; position:relative; margin-right:-400px;}.
</pre>

The latter code effectivley creates a right hand border 400px thick (in outer) and on the inner div, a right hand margin of -400px!! Minus 400

px you are having a laugh...NO that is where the magic is, the negative quantity forces the div to have a margin in th eopposite direction to

what is normally expected and as the out div grows the inner div fills it and creates this kind og "400px buffer".

CSS has been designed such that if a browser does not understand something, it ignores it instead of creating an error. I have written the

CSS so tha the compliant browsers see the min-width argument first , set themselves and then move on to the next style.

The basic HTML set up is

<pre><div class="outer">
<div class="inner">
<div class ="content">
Here is my Content
</div>
</div>
</div>
</pre>

I have annotated the CSS for you to look at and digest.

Link to demo