The most typical and practical layout is top, middle and bottom, with three columns in the middle. This example has two characteristics:
1. The three-column effect in the middle can achieve any single-column background color.
2. The overall narrowest is 770px and the widest is 1024px, which means that if the window is smaller than 770xp, the bottom scroll bar will appear. If it is larger than 1024px, the screen will be automatically centered.
Browse the effect: http://www.rexsong.com/blog/attachments/200512/29_154158_minmax_3col.htm
Analysis:
The outermost wrapper has all the content nested inside, and the whole is positioned relatively. max min already controls the narrowest and widest values very well, but it has no effect on IE. If there are no other layouts interspersed, this layer can actually be written in the body, eliminating one 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 lower outer header footer
The header is positioned absolutely and the footer is positioned relatively; the outer margins are 130px 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;}
outer lower level clearheader outerwrap right clearer
clearheader is used to fill in the gaps in the header. clearer is a commonly used filling hack.
Why is outerwrap width 99% instead of 100%? Because its upper outer layer has a border, 100% width plus 2 border pixels will expand it, and FF has obvious effects.
The processing of right is very classic. It is resolved as positioning under IE and as floating under FF. The processing of negative margins also just uses the space left 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;}
The centercontent left clearer in outerwrap is very simple, and the idea is similar to the above explanation.
