CSS Tricks (Minimum Width for a Page)

Minimum Width for a Page

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 functionality 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 class=”container”>

Next, we create our CSS commands, 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, that this command will cause your CSS document to become invalid; you may prefer to insert it into the head of each HTML document to get around 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”);
}

Permanent link to this article: https://blog.openshell.in/2011/01/css-tricks-minimum-width-for-a-page/

Leave a Reply

Your email address will not be published.