Monday, October 24, 2005

CSS: Force a Fixed Width HTML Webpage

Cross-browser content layout fix for variable-length content using CSS

BACKGROUND:
Firefox browser page has no vertical scrollbar unless the content exceeds the browser window height. IE always has a vertical scrollbar, it is merely greyed out when the content doesn't exceed the browser window height.

PROBLEM:
This can be a problem if you have some centered content in pages with the same layout but some content fits in the browser window and on other pages the content is taller than the window. Navigating from one page to the other appears as if the centered content is misaligned.

SOLUTION:
Include this stylesheet in your html code of the webpage to force a scrollbar even when its not necessary, for regular width pages.

<style type="text/css">
html { height: 100.1%; }

</style>

No comments: