__—— October 2012: Centering a Table in a Website
This little website is a “narrow” one, of a fixed width, and centered in the ‘page’, which is as wide as the screen-resolution that YOU are using. It’s looking about right, now... but it took a LOT of homework to achieve that!
It was based on a site design that I used years ago, when I lived in Brisbane and my ISP provided webspace as part of their Internet package. After moving to Maleny I had to change ISP, and they did not provide webspace. So I hacked that old site ( it had been offline for a couple of years ) to “modernize” it, suitable for this separate hosting deal. That rebuilt version of the site used HTML Tables to control the page layout ( header, expanding sidebar, variable main content area ), so that each page was basically only a Table – all that really changed was the content inside the Table. That is the way that websites have been assembled for decades.
I ran into annoying little problems, though. The good, reliable HTML tag <center> has been DEPRECATED (in other words: retired, so that newer Browsers simply ignore it). This useful command, along with several other useful ones such as <height> simply don’t do anything any more, so they all HAD to be replaced. It is necessary to use CSS (Cascading Style Sheets) ‘style’ commands to replace the deprecated HTML tags. By the time I had done that, the entire site had been completely rebuilt.
In general terms, using CSS instead of deprecated HTML tags is usually a step in the right direction, because the CSS style commands are often far more versatile than the old HTML tags that they replace. So modern, compliant sites use pages with a declared code-style ( known as the ‘!DOCTYPE’ ), so that all Browsers know exactly how to render them, and CSS commands are used to manage all positional issues. All good, right?
Wrong, I soon discovered. In the case of getting a Table centered consistently on a page, the CSS “margin-left:auto; margin-right:auto;” command, which in theory should work perfectly in place of the now-useless <center> tag, simply did not. Changing pages caused the whole page to skip sideways by just a few pixels. As a work-around, I modified the entire site to use a fixed left margin, and that corrected the problem, although it did not have the “look” I wanted.
I went back to school to find out that the Gurus who decide which HTML and CSS commands should or should not be used, and for what purposes, have decided that building websites with HTML Tables is now a cardinal sin, and the day will come when such websites will simply fail to render on modern Browsers. Aha! So that’ll be why it’s jumping sideways! So I reluctantly learned how to rebuild the site again using CSS commands on a nested ‘container’ basis, making HTML Tables unnecessary. It took a long time, but I finally got the whole site converted... only to find that, when changing pages, there was that damned unpredictable sideways shuffle again – it hadn’t been the use of Tables at all!
I was about to give up and just accept a fixed left margin, thinking that at least the CSS-based version of the site would be more future-proof than the HTML Table-based site, even if it was not what I really wanted, when I stumbled on an online discussion about this very problem – other site designers have run into the exact same problem. Aha again!
So, just in case you have struggled with the same issue, here it is: when you navigate from a page with content that does not fill the screen, to one where the content more than fills the screen, a vertical scroll-bar is automatically triggered, and this makes the “available” screen-width narrower, even though a ‘greyed-out’ vertical scroll-bar is visible on short pages, anyway. So the calculated center of the page moves to the left by a few pixels. Going from a big page to a small one causes the center to move to the right as the ‘active’ Scroll-bar vanishes.
The solution is ridiculously simple: you just add the CSS definition “overflow:scroll;” to the body declaration of the main StyleSheet file. So this site has now been built from the ground up THREE TIMES! If I had known about this simple fix I would have just stuck with the original HTML Table-based design, and to hell with what the HTML / CSS Gurus think!
• back to top •