Web page narrowest 770px widest 1024px classic layout

The most typical and practical of the page, and the three-column layout in the middle, this example has 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.

IE6.0 and FF1.5 test pass

Analysis:

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

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.

Referrence:
3 col layout with equalising columns and footer

http://www.pmob.co.uk/temp/min-max-3col.htm

Attached: Layout code

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd">
<title> the narrowest 770px widest 1024px classic layout </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/* stop 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]-->

<body>
<div id= "wrapper" >
<div id= "outer" >

<div id= "Clearheader" ></div>

<div class= "Outerwrap" >

<div id= "Centrecontent" >
<p>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
: 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
: 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
: 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
: 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 this content goes here: </p>
</div>

<div id= "Left" >
<p>left content goes here:left content goes here:left content goes
Here:left content goes here:left content goes here:left content
Goes goes here:left content goes here: </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 content goes: </p>
</div>

<div class= "Clearer" ></div>

</div>

<div id= "Footer" >footer-| -Footer </div>
<div id= "header" >header </div>

</div>
</body>