Fixed Page Width

[Renegade605]

How can I fix the width of a webpage to a certain size? If the page goes smaller than 960px wide, some text wraps, and then the whole page gets messed up. Can I make it so there's a scrollbar at the bottom instead? I do want the page to be capable being larger as well, so it won't be forced to be smaller than a user's browser window.

[Guest FirefoxRocks]

Try adding this CSS in:

html{width:960px;min-width:960px;overflow:scroll}

I don't know if it will be compatible in Internet Explorer though.

[Renegade605]

No Dice, so either it isn't compatible with IE, or it doesn't work at all.Any other suggestions?

[Synook]

The min- and max- prefixes don't work in IE 6 and under (though they do in IE 7). Umm... you could use JavaScript

<script type="text/javascript">window.onload = function() {if (window.innerWidth) width = window.innerHeight; //For non-IEif (document.body.clientWidth) width = document.body.clientWidth; //For IEif (width < 960) document.getElementsByTagName('body')[0].style.width = 960px;}</script>

Beware - you will have to set the doctype to strict for this though or else clientWidth returns the width of the window and not the actual document (i.e. + scrollbars + window border + etc).

[Renegade605]

That didn't work either. I get a script error, saying it expects a ';' at char 76 of line 13. (Line 13 is the one with the '}') I tried adding in a semi-colon after the '}' but that didn't work, just caused another error.

[Synook]

Oops forgot quotation marks

<script type="text/javascript">window.onload = function() {if (window.innerWidth) width = window.innerHeight; //For non-IEif (document.body.clientWidth) width = document.body.clientWidth; //For IEif (width < 960) document.getElementsByTagName('body')[0].style.width = "960px";}</script>

[Renegade605]

lol, it works. Cheers!