Narrowest 770px widest 1024px classic layout

The most typical practical upper and lower, and three-column layout in the middle, this example has 2 features:

1. Intermediate Three column effect, you can implement any single column background color.
2. The narrowest 770px, the widest 1024px, that is, the window is less than 770XP on the bottom of the scroll bar, if greater than 1024px Automatic Screen center.

IE6.0 and FF1.5 test pass

Analysis:

The outermost wrapper inserts all the content inside, and the overall position is relative. Max Min has a good grip on the narrowest and widest value, but it has no effect on ie. If there is no other layout of the interspersed, this layer is actually written in the body can be, less than a layer of nesting.

#wrapper {width:auto; border:1px solid #000; min-width:770px; max-width:1024px; text-align:left; margin-left:auto; Margin-right:auto; Position:relative;}

Wrapper Subordinate Outer header footer

The header absolute positioning, footer relative positioning, outer respectively on the left and right 130px outside margin, which is compatible with non IE key.

#outer {margin-left:130px; margin-right:130px; background:silver; border-left:1px Solid #000 border-right:1px Solid 000; Color: #000;}
#header {position:absolute; top:0; left:0; width:100%; height:70px; line-height:70px; border-bottom:1px solid #000; Overflow:hidden; Background: #0ff; Text-align:center; Font-size:xx-large}
#footer {width:100%; clear:both; line-height:50px; border-top:1px solid #000; background: #ffc; color: #000; text-align: Center Position:relative;}

Outer subordinate Clearheader Outerwrap right clearer

Clearheader is used to fill the header blank, clearer is a commonly used fill hack usage.
Why is the outerwrap width 99%, not 100%? Because of his upper outer has a border, 100% width plus 2 frame pixel will support large, FF has obvious effect.
Right's processing is very classic, ie under the resolution for positioning, FF under the float. The processing of the negative margin is also just using the blank left on the outer.

#clearheader {height:72px;}
. outerwrap {float:left; width:99%;}
#right {
position:relative;
width:130px; Float:right; left:1px;
margin-right:-129px;
}
* HTML #right {margin-right:-130px; margin-left:-3px}
. clearer{height:1px; overflow:hidden; margin-top:-1px; clear:both;}

The centrecontent left clearer in the outerwrap is very simple, thinking similar to the above description.

<!--[if GTE IE 5]> specifies IE5.0 and version above browser valid

Use the expression method to control the width condition of IE5.0 and above versions.

Body {width:expression (Documentelement.clientwidth < 770?) (documentelement.clientwidth = 0?) (Body.clientwidth < 770?) "770": "Auto"): "770px"): "Auto");
#wrapper {width:expression (Documentelement.clientwidth > 1024?) (documentelement.clientwidth = 0?) (Body.clientwidth >1024?) "1024": "Auto"): "1024px"): "Auto");

Start just to find out how the foreigner is to center min Max, did not expect the last is expression, too disappointed, in fact, the use of scripting here to control better. In addition, the foreigner text of Min width of 800px is wrong, the definition of CSS is 770px, and then cut screen confirmation is also 770px.

In general this is a very complex layout example that incorporates many classic usages and definitions, and is both traditional and practical. Similar to the complex layout, the four-layer nesting implementation is more advantageous to the traditional layout.

Referrence:
3 col layout with equalising columns and footer http://www.pmob.co.uk/temp/min-max-3col.htm