Imposing Minimum Width With CSS

This document describes a method to impose a minimum width to a objects using css, whilst allowing the objects to size to the browser when the width is greater than the minimum.

easy... use the css property min-width
e.g. 

min-width:450px;

not so... some current browsers (notably MS IE6) do not recognise the min-width property

Example 1

If you shrink IE6 so that the width is approaching 400px you will see the content block pops down below the box out on the right, however, this works fine in firebird 0.8.

show example

<style type='text/css'>

  #example_1 div{border:solid 1px #600;}

  #example_1 .main{min-width:450px;}
  #example_1 .boxOut{float:right;width:25%;height:250px;}
  #example_1 .content{margin-right:25%;}

</style>

<div id='example_1'>

  <div class='main'>

    <div class='boxOut'><p>This is a box out</p></div>

    <div class='content'>
      <p>
        This is the content of the page<br />
        <img src='block.gif' width='300' height='300' alt='fixed width object' />
      </p>
    </div>

  </div>

</div>

Example 2

Adding a fixed width 'spacer' into the main section does not work either. The box-out still pushes into the content and the content pops down below it again.

show example

<style type='text/css'>

  #example_2 div{border:solid 1px #060;}

  #example_2 .main{min-width:450px;}
  #example_2 .boxOut{float:right;width:25%;height:250px;}
  #example_2 .content{margin-right:25%;}

</style>

<div id="example_2">

  <div class='main'>
    <!-- 'Spacer' image technique -->
    <img src='block.gif' width='450' height='1' alt='fixed width object' />

    <div class='boxOut'><p>This is a box out</p></div>

    <div class='content'>
      <p>
        This is the content of the page<br />
        <img src='block.gif' width='300' height='300' alt='fixed width object' />
      </p>
    </div>

  </div>

</div>

Example 3 - Solution

The way this is done is using IE's Dynamic Properties and is ignored by other browsers.

show example

<style type='text/css'>

  #example_3 div{border:solid 1px #600;}

  #example_3 .main
  {
    min-width:450px;
    /* IE Dynamic Expression to set the width */
    width:expression(document.body.clientWidth < 550 ? "450px" : "100%" );
  }
  #example_3 .boxOut{float:right;width:25%;height:250px;}
  #example_3 .content{margin-right:25%;}
  
</style>

<div id='example_3'>

  <div class='main'>

    <div class='boxOut'><p>This is a box out</p></div>

    <div class='content'>
      <p>
        This is the content of the page<br />
        <img src='block.gif' width='300' height='300' alt='fixed width object' />
      </p>
    </div>

  </div>

</div>