CSS instances: three-column free layout 770-1024 adaptive width

css| Self Adaptation

This example is the most typical practical upper and lower, and the middle three-column CSS layout, with the following 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.

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");

IE6.0 and FF1.5 test pass to see how it works:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "//www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd" > <ptml xmlns= "//www.w3.org/1999/xhtml" ><pead><title>www.webjx.com</title><meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/><style type=" Text/css ">* {margin:0; padding:0;} Body {padding:10px 0 0 0; color: #000; background: #fff; text-align:center;} #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 {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} #left {Position:relative;/*ie needs this to show float */width:130px;float:left;left:-1px; Margin-left: -129px;/*must is 1px less than width otherwise won ' t push footer down */}* html #left {margin-right:-3px;} /* 3px jog*/* HTML #outer {/* 3px jog*/margin-left:127px; margin-right:127px} p {margin-bottom:1em; padding:0 5px} #right {Position:relative;/*ie needs this to show float */width:130px; float:right; left:1px;margin-right:-129px;/* Must is 1px less than width otherwise won ' t push footer down */}* html #right {margin-right:-130px; margin-left:-3px}/* s Top float drop in IE + 3px jog/#footer {width:100%; clear:both; line-height:50px; border-top:1px solid #000; background : #ffc; Color: #000; Text-align:center; Position:relative;} #clearheader {height:72px;} /*needed to make room for header*/#centrecontent {float:right; width:100%; position:relative;} Html>body #centrecontent {margin:0 -0.5%}/*moz needs this*/.outerwrap {float:left; width:99%;}. clearer{height:1px; overflow:hidden; margin-top:-1px; clear:both;} /* Mac hide\*/* HTML #outer, * HTML #wrapper, * HTML #centrecontent {Height:1%}/* End Hide */</style><!--[if GTE IE 5]><style type= ' text/css ' >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"); </style><! [Endif]--></pead><body><div id= "wrapper" ><div id= "outer" > <div id= "Clearheader" > </div><div class= "Outerwrap" > <div id= "centrecontent" > <p>min width of 770px and Max width of 102 4px</p><p>centre content goes here Centre content goes here:centre content goes here Centre content goes Here:centre content goes Centre content goes here:centre content goes here Centre content goes Here:centre Content goes here centre content goes Here:centre content goes here CENtre content goes here:centre content goes here Centre content goes here:centre content goes here Centre content GoE s here:centre content goes centre content goes here:centre content goes here Centre content goes Here:centr E content Goes Centre content goes here:centre content goes here Centre content goes Here:centre content goes Here centre content goes Here:centre content goes this centre content goes here:centre content goes here Centre C Ontent goes here:centre content goes here Centre content goes Here:centre content goes this centre content goes here : Centre content Goes centre content goes here:centre content goes here Centre content goes here:centre cont ENT goes here content goes: </p></div><div id= "left" > <p>left content goes here:left Conte NT goes here:left content goes here:left content goes here:left content goes here:left content goes goes Here:le FT content goes here: &Lt;/p></div><div class= "Clearer" ></div></div><!--end outer wrap--><div id= " Right ' > <p>start right content goes here:right content goes here:right content goes here:right content goes Here:right content goes here:right content goes here:right content goes here:right content goes here:right cont ENT goes here: </p></div><div class= "clearer" ></div></div><div id= "Footer" > Footer-| -Footer </div><div id= "header" >header </div></div></body></ptml>

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

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.