Question

I have a web page who’s content width is about 900px, but the minimum width (because the header image is larger than the 900px) is about 1200px. This means that when I view my page from a screen that is less than 1200px but larger than 900px, the web page will have a vertical scroll.

I would like for the scroll to appear only when the screen is smaller than 900px-wide.

I’ve tried adding an overflow-x on the body container, hoping that the body tag takes on the width of my screen. This works in all browsers except on IE7, which I would need it to work in aswell.

Is there a method that would allow this to work?

Let me know if I’m not clear in my explanations.

Answer 1

You might consider using an expression in IE. It’s a bit slow but will help you out for older browsers. The CSS would look something like this:

div.container { min-width: 900px; overflow-x: hidden; }
* html div.container { width: expression(Math.max((document.documentElement ? document.documentElement.clientWidth : document.body.clientWidth), 900)+'px'); }