Liquid CSS Layouts - Design Alternative to Table Based Websites

Step 9 - Left and right margins and other browsers

Because we want the layout to breath we want to leave some space to the left and right. A left and right margin of 4-5% for the body tag sounds about enough. At this point we can safely say we achieved liquidity in Internet Explorer. The layout expands 100% of what's left after taking out the left and right margins widths. Take a look below:

But what about other browsers? How do they interpret the 100% width we specified to the Headerbackground box and the left and right margins? Normally such references would first apply the left and right margins and then let the layout expand 100% of what's left. Unfortunately Opera, Mozilla and Netscape do not see it that way. Take a look below

After some testing we noticed that all three

Create the left margin properly of 5%
Add the width of the layout (100%) to it thus making the entire page have 105% in width
Create an annoying horizontal scroll bar.

Here's a workaround in order to please the three browsers. We specify a left margin of 5% for the body tag and replace the 100% width of the Headerbackground box with 90%. Only the Headerbackground box needs a different width because the other 3 are wrapped in it. This way the width of the expanding layout will in fact be 95% leaving an extra 5% as a right margin. This workaround satisfies Opera, Netscape and Mozilla but slightly shrinks the layout in Internet Explorer by 5% (although it's not really a tragedy).

Liquid CSS layouts tutorial structure

Back to Website Builder Tips: Making A Web Site Accessible

Liquid CSS Layouts - Design Alternative to Table Based Websites

Step 9 - Left and right margins and other browsers

Liquid CSS layouts tutorial structure

Other Accessible Web Design articles