Http://www.alistapart.com/articles/holygrail
This translation of the page copyright GREENGNN All, reproduced please indicate the source
First step: Create a structure
XHTML starts with header, footer, and container
<div id= "Header" ></div>
<div id= "Container" ></div>
<div id= "Footer" ></div>
CSS first defines the container and leaves a place for the sideleft and sideright to be added.
#container {
padding-left:200px; * LC Width * *
padding-right:150px; /* RC Width * *
}
Our layout now looks like this.
Figure 1--Creating a frame
Step two: Add content elements
Add content elements based on the first step
<div id= "Header" ></div>
<div id= "Container" >
<div id= "center" class= "column" ></div>
<div id= "left" class= "column" ></div>
<div id= "Right" class= "column" ></div>
</div>
<div id= "Footer" ></div>
Then define widths and float separately to arrange the elements on a single line, and to clear the footer floating alignment
#container. Column {
Float:left;
}
#center {
width:100%;
}
#left {
width:200px; * LC Width * *
}
#right {
width:150px; /* RC Width * *
}
#footer {
Clear:both;
}
This defines the 100% width for the center element to fill the Montainer free space, and now the layout becomes
Figure 2: Adding content elements
Step three: Put left in the right place
To put left in the right place, we'll take two steps.
1. Let left and center at the same horizontal line
#left {
width:200px; * LC Width * *
Margin-left:-100%;
}
Look at the effect
Figure 3--left Move Half done
2. Use relative positioning to move left to the correct position
#container. Columns {
Float:left;
position:relative;
}
#left {
width:200px; * LC Width * *
Margin-left:-100%;
right:200px; * LC Width * *
}
Let left distance to his right element center 200px, OK, left finally to his position
Figure 4--left to his place.
Fourth step: Let right also to their own correct position
From the picture above, we just need to push right down container's padding-right and see what we can do.
#right {
width:150px; /* RC Width * *
Margin-right: -150px; /* RC Width * *
}
All right, now the elements are correctly returned to their position.
Figure 5--right to the right place.
Fifth step: Solve the bug to make the layout more perfect
If the browser window size changes, center becomes smaller than left, the perfect layout is broken, we set a min-width for the body
To solve this problem, because IE does not support him, so there will be no negative impact, adjust the following
Body {
min-width:550px; /* 2x LC width + RC Width * *
}
At this point in the IE6 (completely open window), left element is too far away from the concrete, and then adjust
* HTML #left {
left:150px; /* RC Width * *
}
These sizes are based on the width defined above, and you need to adjust them according to your actual situation.
Now add padding
The content text is attached to the side of the container, I believe you can see it, will not be very comfortable, adjust the
#left {
width:180px; /* LC fullwidth-padding * *
Padding:0 10px;
right:200px; /* LC Fullwidth * *
Margin-left:-100%;
}
Of course can not only add left even if finished, to give a series of elements must be added, but also to adjust the increase padding, bring new bugs, adjust the following
body {
min-width:630px;/* 2x (LC fullwidth +
cc padding) + RC fullwidth * *
}
#container {
padding-left:200px;/* LC fullwidth/
padding-right:190px;/* RC Fullwidth + CC padding * *
}
#container. column {
position:relative;
float:left;
}
#center {
padding:10px 20px;/* CC padding */
width:100%;
}
#left {
width:180px;/* LC width/
padding:0 10px;/* LC padding */
right: 240px; /* LC Fullwidth + CC padding * *
margin-left:-100%;
}
#right {
width:130px;/* RC width */
padding:0 10px;/* RC padding * *
margin -right: -190px; /* RC Fullwidth + CC padding * *
}
#footer {
clear:both;
}
/*** IE Fix ***/
* html #left {
left:150px;/* RC fullwidth * *
}
Header and footer padding can be increased at will, not mentioned here, there are length units with EM more affinity (em can allow users to use the browser to adjust the font size they need)
But can not mix use, choose Em and px when wise, see the effect
element and other high problems
Using http://www.positioniseverything.net/articles/onetruelayout/equalheight
Someone translated:http://www.blueidea.com/tech/web/2006/3210.asp .
The methods mentioned in the paper are not specifically explained.
#container {
Overflow:hidden;
}
#container. Column {
padding-bottom:20010px; * * X + padding-bottom * *
Margin-bottom: -20000px; * * X * *
}
#footer {
position:relative;
}
To solve the Opera 8 bug, the code is adjusted as follows
<div id= "Footer-wrapper" >
<div id= "Footer" ></div>
</div>
* HTML body {
overflow:hidden;
}
* html #footer-wrapper {
float:left;
position:relative;
width:100%;
padding-bottom:10010px;
margin-bottom: -10000px;
background: #fff/* Same as Body
background/
}