css--three rows of three columns, such as high-level layout graphic Tutorial _ 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 begins with the header, footer, and container

CSS first defines the container, leaving a position for the sideleft to be added, and sideright

#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=" Http://files.jb51.net/upload/2007428212947610.gif ">

Diagram of the creation of the framework

Step two: Add content elements

Add content elements based on the first step

Then define widths and float separately to arrange the elements in a line, as well as to clear 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, which fills the Montainer free space, and now the layout becomes

740)? ' 740px ': ' Auto '} "alt=uploads/200602/13_074922_diagram_02.gif src=" Http://files.jb51.net/upload/2007428212948399.gif ">

Figure 2: Adding content elements

Step three: Put left in the right place

To put left in the right place, we're in two steps.

1. Leave left and center at the same horizontal level

#left {
width:200px; /* LC Width */
Margin-left:-100%;
}

Look at the effect

740)? ' 740px ': ' Auto '} "alt=uploads/200602/13_075000_diagram_03.gif src=" Http://files.jb51.net/upload/2007428212948874.gif ">

Figure 3--left Half of the move 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 */
}

Leave the left distance to his right element center 200px, OK, left finally to his own position

740)? ' 740px ': ' Auto '} "alt=uploads/200602/13_075037_diagram_04.gif src=" Http://files.jb51.net/upload/2007428212948583.gif ">

Figure 4--left to his place.

Fourth step: Get right to where you are.

Look, we just have to push right down container's padding-right and see what we can do.

#right {
width:150px; /* RC Width */
Margin-right: -150px; /* RC Width */
}

Well, now that the elements are properly returned.

740)? ' 740px ': ' Auto '} "alt=uploads/200602/13_075115_diagram_05.gif src=" Http://files.jb51.net/upload/2007428212949621.gif ">

Figure 5--right to the right place.

Fifth step: Solve the bug to make the layout more perfect
If the size of the browser window changes, center becomes smaller than left, the perfect layout is broken, we set a min-width to the body
To solve this problem, because IE does not support him, so there will be no negative effect, adjust the following

Body {
min-width:550px; /* 2x LC width + RC Width */
}

At this time in the IE6 (fully open window), the left element is too far away, and then adjust

* HTML #left {
left:150px; /* RC Width */
}

These sizing is based on the width defined above, you adjust the time according to their own situation.

Add padding Now

Content text affixed to the side of the container, I believe you can see, not very comfortable, adjust a bit

#left {
width:180px; /* LC fullwidth-padding */
Padding:0 10px;
right:200px; /* LC Fullwidth */
Margin-left:-100%;
}

Of course, can not only increase left even if finished, to give a series of elements must be added, but also to adjust the increase padding, bring the new bug, 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 arbitrarily added, here is not mentioned, there is a length unit with EM more affinity (em can let users use the browser to adjust the font size they need)

But do not mix, choose Em and px wisely, look at the effect

Elements and other high issues
With Http://www.positioniseverything.net/articles/onetruelayout/equalheight
Someone translated it: http://www.blueidea.com/tech/web/2006/3210.asp.
The method mentioned in this paper is 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

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

