DIV CSS classic layout [width adaptive] [automatic screen centering]_html/css_WEB-ITnose

Header

Analysis:

The outermost wrapper nests all the content inside, and the overall positioning is relative . 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:776px; max-width:1000px; text-align:left; margin-left:auto; margin-right:auto; position:relative;}

wrapper’s lower-level outer header footer

The header is positioned absolutely and the footer is positioned relative; the outer has 130px margins on the left and right respectively. This is 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 blanks of 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, adding 2 border pixels to 100% width will stretch 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 idea of ​​centercontent left clearer in outerwrap is similar to the above.

Specify that browsers of IE5.0 and above are valid

Use the expression method to control the width condition of IE5.0 and above, and realize automatic width adjustment and centering. I fixed the width value because if you use auto here, the div content will not be displayed during the window resizing process.

body {
width:expression( documentElement.clientWidth }
#wrapper {
width:expression( documentElement.clientWidth }

This example combines many classic usages and definitions of DIV CSS, and is very traditional and practical at the same time.

Footer

Code
  1html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2
  3
  4
  5

  6
  7
  8
  9
 10
 11
 12
 13
186
187
188
189
190
191

192
193

Header

194
195

196
197

198
199

200
201

Analysis:

202
203

The outermost wrapper nests all the content inside, and the overall positioning is relative. 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.

204
205

#wrapper{ width:auto; border:1px solid #000; min-width:776px; max-width:1000px; text- align:left; margin-left:auto; margin-right:auto; position:relative;}

206
207

208
209< ;p>wrapper's lower-level outer header footer
210
211

The header is positioned absolutely and the footer is positioned relative; the outer is positioned on the left and right respectively There are 130px margins, which is key to compatibility with non-IE.

212
213

#outer{ margin-left:130px; margin-right:130px; background:silver; border-left:1px solid #000; border-right :1px solid #000; color: #000;}

214
215#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}

216
217#footer { width:100%; clear:both; line-height:50px; border-top:1px solid #000; background:#ffc; color:#000; text-align:center; position:relative;}

218
219

outer lower-level clearheader outerwrap right clearer

220
221

222
223outerwrap Why is the width 99% instead of 100%?

224
225 Because its upper outer layer has a border, 100% width plus 2 border pixels will make it bigger, and FF has obvious effects.

226
227right's processing is very classic. It is resolved to positioning under IE and floating under FF. The processing of negative margins also just uses the space left by the upper outer.
228
229

#clearheader{ height:72px;}

230
231.outerwrap { float:left; width: 99%;}

232
233#right {

234
235position:relative;

236
237width:130px; float:right; left:1px;

238
239margin-right:-129px;

240
241}
242
243* html #right { margin-right:-130px; margin-left:-3px}

244
245.clearer{ height: 1px; overflow:hidden; margin-top:-1px; clear:both;}

246
247

The idea of ​​centrecontent left clearer in outerwrap is similar to the above.

248
249

Specifies that browsers of IE5.0 and above are valid

>251

Use the expression method to control the width condition of IE5.0 and above, and automatically adjust the width and center it. I fixed the width value because if you use auto here, the div content will not be displayed during the window resizing process.

252
253

body {

254
255width:expression( documentElement.clientWidth
256
257}

258
259#wrapper {

260
261width:expression( documentElement.clientWidth
262
263}

264
265

This example combines many classic usages and definitions of DIV CSS, and is very traditional and practical at the same time .

266
267

268
269

270
271

272
273

274
275

Footer

276
277

278
279
280
281