Classic layout of the shortest 770px and 1024px

This example has two features:

1. The effect of the three columns in the middle can be any single-column background color.
2. The whole screen is the shortest 770px and the shortest width is 1024px. That is to say, if the window is smaller than 770xp, the scroll bar is displayed. If the window is larger than 1024px, the screen is centered automatically.

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

Analysis:

The wrapper on the outermost layer embeds all the content in it and locates it as a whole. Max min has well controlled the shortest width, but has no effect on IE. If there are no other la S, this layer can be written in the body, with a lower layer nested.
# Wrapper {width: auto; Border: 1px solid #000; Min-width: 770px; max-width: 1024px; text-align: Left; margin-left: auto; margin-Right: auto; position: relative ;}

Outer header footer under wrapper

Specifically, the header is absolutely positioned, while the footer is relatively positioned; the outer has a PX margin on the left and right respectively, which is the key to compatibility with non-ie.
# 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 ;}

Clearheader outerwrap right clearer under Outer

Clearheader is a common filling hack usage.
Why is outerwrap 99% wide, not 100%? Because his outer has a border on the upper layer, adding two border pixels at the width of 100% will increase, and FF will have a significant effect.
The processing of right is classic. The resolution in IE is positioning, while that in FF is floating. The processing of the negative margin also happens to use the blank space set by the upper 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 ;}

Centrecontent left clearer in outerwrap is simple. The idea is similar to the above description.

<! -- [If GTE ie 5]> the specified ie5.0 and later browsers are valid.

The expression method is used to control the width of ie5.0 and later 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 ");}

At first, I just wanted to figure out how the foreigner implemented the center min max. I didn't expect the last expression. It was too disappointing. In fact, it is better to use the script here. In addition, the min width of 800px in the original foreigner text is incorrect, and the CSS definition is 770px. Later, the screenshot is confirmed to be 770px.

In general, this is a complicated layout example. It integrates many classic usage and definitions, and is both traditional and practical. Similar to complex la S, the implementation of layer-4 Nesting is advantageous for traditional la S.

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