Very often after I am done doing my part and transfered all the  web files  to the client , I receive an email/ phone call a day or so later inquiring why  some pages jump in web browser.

The very first thing the client blames is the current web browser s/he is using, and why not? Then after opening all the major web browsers at his disposition he realizes the issue remains the same on all browsers.

Now, may be I am the one who screwed up!
Nope!!

In all cases it’s because web pages have different amount of content some longer than others. When a web page is long enough to exceed the web browser’s height  then a vertical scroll bar appears.  If on the other hand the web page only has a small amount of copy, everything is shown above the fold and no vertical scroll bar is needed by the web browser.

Cause :
When using a fixed width layout with the left and right margins set to auto on your main container (#wrapper) , your web pages will be horizontally centered. The horizontal position of your web page depends on  the available width in your web browser viewport.

Let’s assume your browser window is 1024 pixels wide and that you have set your page layout to a fixed width of 980 pixels to be horizontally centered.

• If a page copy is concise  the entire page can be shorter than your browser window’s height. In this case no vertical scroll bar is necessary. You web page will therefore have a left and right margin of roughly (1024-980)/2, that is about 22 pixels on each side.
• Now left assume another web page has a lot of text copy. In this case the page height to exceeds the web browser’s window height. A vertical scrollbar appears therefore cutting down on the width of the browser’s viewport.
  The width of the scrollbar is about 20 pixels, so we are now left with only 1004 px (pixels).

  Using the same formulas as above (1004-980)/2, yields 12 pixels for the left and right margin for this web page. That’s what creates a 10px horizontal shift to the left when you navigate from short (no vertical scrollbar) to a longer page where the vertical scrollbar is required.

Solution:
To solve the issue we are facing the solution is to force the web browser to display the vertical scrollbar on every page no matter how much content there is in there.

1. - Option 1
   Using the ‘min-height” CSS property to  set a minimum height of your main container to match that maximum browser window height of your target audience.

   The problem is you do not yet  have that information yet you review your web analytics after your site went live.

   However from a personal experience, I found that setting the min-height to 1000px will generally do the trick. The only hiccup is the  ”min-height” CSS property is not understood by IE6. Therefore users using that version of  Internet Explorer will experience the horizontal page  shift.

2. - Option 2
   Add a just  enough line breaks (Shift+Enter) or empty paragraphs (Enter) after the content on pages with less copy.

Choose whichever option is more suitable to your  design and target audience.
I’ll go for option 2 for the time being until IE6 disappears from the web landscape.

Does it really matter if a web page shift just a few pixels. For most people, it doesn’t. heck, most site visitors will even notice or be bothered by it.

But it’s a great deal for digital artists. Graphic designers are a different breed. A graphic designer will “fight you” tooth and nail for 1 pixel and for a good reason. That doesn’t mean visual artists are very difficult people to work with, on the contrary. They just thrive for perfection.

You just devoted  hours creating a pixel-precision CSS layout,  tweaked and tested it on various web browsers. It all looks good and works perfectly even in IE6.  You now have a  template you can use to create your web pages.  You start adding content, preview  that web page in a browser and surprise, oh surprise, your nicely crafted layout is now out of control.

What happened? More likely mismatched <div>, <p> or <span>,… tags!!

Without proper comments to indicate where each main container tag is closed in the HTML markup, it can be challenging and painful to “hunt” the source of this layout issue. Because you now have so many nested  tags, you would have to look into your HTML markup line by line to match each opening and closing tag. And if you happen to miss just one of them, you will have to start all over again from the “<body>” tag down.

Let’s just take a look at this typical  markup within a body of an HTML document:

<div id=”wrapper”><div id=”header”>Header content goes here </div><div id=”maincontent”><div id=”content”> Page content goes here</div><div id=”sidebar”> Sidebar Navigation</div></div><div id=”footer”> Footer Content goes here</div></div>

It looks clean and is self-explanatory. However once you start  to copy & paste content in the different containers  and add new blocks , matching tags becomes a daunting task. That’s because each container can wrap smaller containers through a nesting process that can go on and on. It’s hard to tell which closing “</div>” corresponds to which opening “<div …>”.

That’s why you need to always comments your HTML markup before you start adding content. For instance the markup shown above would be properly commented as follow:

<div id=”wrapper”>
<div id=”header”>Header content goes here </div><!–  end header –>
<div id=”maincontent”>
<div id=”content”> Page content goes here</div><!–  end content –>
<div id=”sidebar”> Sidebar Navigation</div><!– end sidebar –>
</div><!– end maincontent –>
<div id=”footer”> Footer Content goes here</div><!– end footer –>
</div><!– end wrapper –>

The portions “<!– … –>” are HTML comments. The will never be displayed by a web browser when placed in your HTML markup.
So the tips I would like to share with you based on my daily experience are:

• Comments helps you annotate your markup for future reference.
• Add an HTML comment right after the closing tag “</div>” tag of each main container.
• Commenting your HTML code help you set reference point where each HTML tags is closed.
• HTML comments  helps you  isolate  each block and quickly fix a CSS  layout issue.

No matter how complex your website layout appears to be, you will for sure find the CSS layout that matches your design’s wireframes including the typical main containers such as the header, navigation bar and page content area. Smaller elements can then be wrapped by those main blocks.

Those Dreamweaver CSS layouts are cross-browser compatible therefore saving you time and the frustration of having to test your layout again all popular web browsers. All you need is make a few easy tweaks from the Dreamweaver CSS panel to update the dimensions, background styles and you can start adding your design elements.