The narrowest 770px widest 1024px classic layout research _css/html

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

1. The middle three column effect, can be arbitrarily implemented single-row background color.
2. The overall narrowest 770px, the widest 1024px, that is, the window is less than 770XP on the bottom scroll bar, if greater than 1024px Automatic Screen center.

Effect View: http://www.rexsong.com/blog/attachments/200512/29_154158_minmax_3col.htm

Analysis:

The outermost wrapper all the contents in the inside, the overall relative positioning. Max min has very good control of the narrowest and widest values, but it has no effect on ie. If there is no other layout interspersed, this layer is actually written in the body can be, less 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

Where the header absolute positioning, footer relative positioning, outer respectively to the left and right side of the margin 130px, 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 used to fill the blanks of the header, clearer is a common use of fill hack.
Why is the outerwrap width 99%, not 100%? Because his upper outer has a border, 100% width plus 2 border pixels will be large, FF has obvious effect.
Right processing is classic, ie under the resolution of positioning, FF is floating. The processing of negative margins is also just using the white space 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;}

Outerwrap within the centrecontent left clearer is very simple, thinking similar to the above description.

!--[If GTE IE 5]> specify IE5.0 and above browser valid

Use the expression method to control the width 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?) "1024x768": "Auto"): "1024px"): "Auto");

began only to understand how the foreigner to achieve the center min Max, did not expect the last expression, too disappointed, in fact, the use of script control here is better. In addition, the original text of the Min width of 800px is wrong, the CSS definition is 770px, and then the screenshot confirmation is 770px.

In general this is a very complex layout example that incorporates a number of classic usages and definitions, while very traditional and practical. Similar to complex layouts, four-layer nesting implementations are more advantageous for traditional layouts.

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

& #xe63a;-->