Min-width for internet explorer 6.0
Current min-width property of CSS is not recognized by Internet Explorer 6.0, which still is a widely used browser. Min-width is a very useful property especially if you are building fluid designs, and want your content division stop shirinking after a certain width.
This is a small workaround to set a min-width in your DIV, works in IE:
Prerequisites: Javascript enabled Internet Explorer 6.0
Here is our page structure:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <div id="container"> <div align="center"> <div id="header"> <h2>HEADER TEXT</h2> </div> <div id="contents"> <p><strong>This box's width will not get lower than 600 pixels.</strong></p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus sodales diam sed quam. Donec tempor blandit nisi. Mauris rutrum pede vitae arcu porta tincidunt. Vivamus sem. Maecenas a risus et tortor fringilla malesuada. Integer scelerisque elementum leo. Nullam non arcu id metus volutpat lobortis. Maecenas posuere. Pellentesque ac massa non mi laoreet nonummy. Nulla nec magna at erat rutrum pretium. Praesent sed nunc nec tellus dapibus mollis.</p> <p>Suspendisse id nunc. Donec imperdiet, dolor ut cursus fringilla, leo lorem dictum lacus, quis placerat purus nunc a risus. Quisque in libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam molestie turpis sed nulla. Aenean erat turpis, mattis vel, molestie vitae, lacinia sed, orci. Nullam eu felis. Proin a lectus quis urna faucibus bibendum. Donec ultrices. Ut lacus. Vestibulum nec metus. Donec metus nisi, lacinia eget, porttitor id, sollicitudin sagittis, urna. Aliquam non ipsum eu ipsum pulvinar nonummy. Sed iaculis vestibulum augue. In porta est ut sem. Fusce mi. Fusce quis mauris quis purus venenatis malesuada. Mauris facilisis tempus lorem. </p> </div> <div id="widthCheck"><strong>This DIV's width is 600 pixels</strong></div> <div id="footer"> <h2>FOOTER TEXT</h2> </div> </div> </div> </body> </html>
Let's see what we got:
- container DIV, which holds everything.
- A center aligned DIV, which puts everything in the center.
- header and footer DIVs, with auto width.
- A contents DIV, which we want to put a minimum width (600px in this example)
- A widthCheck DIV, to test our contents DIV's width.
And our styles:
html, body {margin:0px; padding:0px; font-family:Verdana, Arial, Helvetica, sans-serif;}
#header {
height:70px;
text-align:center;
background-color:#6699FF;
color:#003366;
}
#contents {
width:expression((document.getElementById("container").offsetWidth * 70) / 100 < 600 ? "600px" : "70%");
background-color:#FF9966;
padding:7px;
color:#333333;
text-align:justify;
}
#widthCheck {
width:600px;
height:40px;
background-color:#CC3333;
color:#FFFFFF;
margin-bottom:40px;
padding:7px;
}
#footer {
height:50px;
background-color:#999999;
}
This line in the contents DIV's style is doing the trick:
width:expression((document.getElementById("container").offsetWidth * 70) / 100 < 600 ? "600px" : "70%");
It simply says: "If 70% of container's width is less then 600 pixels, set this (contents) width to 600px, else set it to 70%".
You can, of course, change 600px and 70% to your heart's content.
You can check this example here: [1]:
Web Hosting Wiki article text shared under a Creative Commons License.
