I’m working on a fluid width WordPress theme for the first time. As you all must know, fluid width is cool because it fits all screen resolutions.
With monitor screens every time bigger, it really makes no sense to waste screen real estate. But, and there’s always a but, the problem is that some people still insist on using lower resolutions. Believe it or not, some still use 800×600 on their desktops.
Even if this is not a big deal, every day more people use small screen devices to web surfing.
To avoid a weird looking on lower resolutions, it’s always a good practice to establish a minimum width to your theme.
Firefox and most modern browsers accept min-width statement on CSS, the problem is Internet Explorer 6 and bellow don’t.
The best way I found to solve this, after a lot of try and error, was something that Microsoft itself invented, called “expression”.
It can only be used on your major div, the one that embraces the whole layout. It usually comes right bellow “body” tag. If you try it on inner divs, Internet Explorer will simply freeze.
That been said, let’s go into the coding stuff. Locate your major div, “wrapper”, in this example. You’ll probably find something like this:
#wrapper {width: 96%;}
To accomplish min-width on IE, let’s add some code:
#wrapper {width:96%; width: expression( document.body.clientWidth < 971 ? "970px" : "96%" );min-width:970px;}
You can change it to whatever min-width you want, I think the code is pretty self-explanatory.
