From Jennifer Kyrnin,
Your Guide to Web Design / HTML.
FREE Newsletter. Sign Up Now!

I got the following question from Sunny:

Each time one goes to the certain page of the site, while the page is loading, it looks like the content of the page stretches away from the the normal position. Similarly, it autmotically goes back to its normal position. The site is built using CSS and table.

A.

The stretching has to do with how the browsers render the content. This effect is most often seen on layouts where the sections (whether CSS or table-based) are defined as percentages or relative sizes. As the browser receives the information to display, it renders it and then adds more to the layout as more appears.

Web browsers read the HTML much the same as you or I would read a piece of paper with English writing on it, in other words, they start at the top, and move down the document scanning from left to right. As they come to embedded documents (like CSS style sheets or JavaScript) they request that document and begin reading it from the top down as well. (This is a little simplified, as most browsers are "multi-threaded" which means that they can pull down several things at once.)

Once they get to the body of your document, they begin displaying elements as they come to them. If the first column of information they come to says it has a width of "100%" - that column will be displayed at 100%. Then as other elements are read, they are added into the layout, and the browser adjusts the size of the initial elements to fit the correct size.

In the past, with tables, many browsers would leave the screen blank until the entire table was in the browser - which meant that if your table was large or complex, your Web page would be blank for the entire loading time. I suspect that browser makers decided that that was a worse situation than rendering as they got the information and then readjusting the layout to fit.

The only way to prevent that would be to create a layout with fixed widths.