css--three rows of three columns such as high layout graphics and text Tutorials _ Experience Exchange

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.

740)?'740px':'auto'}" alt="uploads/200602/13_074820_diagram_01.gif" src="yun_qi_img/2007428212947610.gif">

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

740)?'740px':'auto'}" alt="uploads/200602/13_074922_diagram_02.gif" src="yun_qi_img/2007428212948399.gif">

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

740)?'740px':'auto'}" alt="uploads/200602/13_075000_diagram_03.gif" src="yun_qi_img/2007428212948874.gif">

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

740)?'740px':'auto'}" alt="uploads/200602/13_075037_diagram_04.gif" src="yun_qi_img/2007428212948583.gif">

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.

740)?'740px':'auto'}" alt="uploads/200602/13_075115_diagram_05.gif" src="yun_qi_img/2007428212949621.gif">

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/
}