Welcome to Photoshop Tutorials. We hope you find the tutorials on our website useful. We update the site weekly so make sure you come check us out at least once a week.  If you have tutorials you would like us to feature, feel free to contact us. Enjoy.
 

Sponsors

CSS: Minimum Width PDF  | Print |

A very handy CSS command that exists is the min-width command, whereby you can specify a minimum width for any element. This can be particularly useful for specifying a minimum width for a page.

Unfortunately, IE doesn't understand this command, so we'll need to come up with a new way of making this work in this browser. First, we'll insert a <div> under the <body> tag, as we can't assign a minimum width to the <body>:

<body>
<div id="container">

Next we create our CSS commands, so as to create a minimum width of 600px:

#container
{
min-width: 600px;
width:expression(document.body.clientWidth < 600? "600px": "auto" );
}

The first command is the regular minimum width command; the second is a short JavaScript command that only IE understands. Do note though, this command will cause your CSS document to invalidate so you may prefer to insert it into the head of each HTML document to get round this.

You might also want to combine this minimum width with a maximum width:

#container
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto");
}

 
< Prev   Next >