CSS min-width

While designing fluid multi-column page using CSS, the right column may wrap under if the browser is resized to a small width. To avoid this we can define min-width for the body tag so the columns won’t wrap. The trick is how to convince IE.

In IE 7, the following will work just fine: body {width: auto; min-width: 600px;}

But not for the earlier version though.. Earlier version of IE has no concept of the “min-width”, as a matter of fact, it thinks “width” represent the min-width.

Someone came up with the body tag like this: body {width: 600px;} html>body {width: auto; min-width: 600px;} The first line is for IE and the second line is for Firefox, Opera or Safari. However, this doesn’t work for some IEs. The last resort, will be to use Javascript to set the min-width using the DOM object access.

This entry was posted in css/design. Bookmark the permalink.