Css-three rows, three columns, and high-level layout graphic tutorial

Http://www.alistapart.com/articles/holygrail
This translation page is copyrighted by greengnn. For more information, see the source.

Step 1: 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 position 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

This. style. width = (this. offsetWidth & gt; 740 )? '740px ': 'auto'} "alt =" uploads/200602/13 _074820_diagram_01.gif "src =" http://files.jb51.net/upload/2007428212947610.gif ">

Figure 1-create a framework

Step 2: add content elements

Add content elements based on Step 1

<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 respectively to arrange the elements in a line, and clear the floating alignment of footer.

# Container. column {
Float: left;
}
# Center {
Width: 100%;
}
# Left {
Width: 200px;/* LC width */
}
# Right {
Width: 150px;/* RC width */
}
# Footer {
Clear: both;
}

The 100% width is defined for the center element to fill the available space of the montainer. The current layout is like this.

This. style. width = (this. offsetWidth & gt; 740 )? '740px ': 'auto'} "alt =" uploads/200602/13 _071_2_diagram_02.gif "src =" http://files.jb51.net/upload/2007428212948399.gif ">

Figure 2: add content elements

Step 3: place left in the correct position

To place left in the correct position, we will take two steps.

1. Make left and center in the same horizontal line

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

View results

This. style. width = (this. offsetWidth & gt; 740 )? '740px ': 'auto'} "alt =" uploads/200602/13 _075000_diagram_03.gif "src =" http://files.jb51.net/upload/2007428212948874.gif ">

Figure 3 -- half left

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

After left is px from the center on the right, the line is displayed, and left is at its position.

This. style. width = (this. offsetWidth & gt; 740 )? '740px ': 'auto'} "alt =" uploads/200602/13 _075037_diagram_04.gif "src =" http://files.jb51.net/upload/2007428212948583.gif ">

Figure 4 -- left to its position

Step 4: Let the right be in the correct position.

From the perspective, we only need to push right into the padding-right of the container to see how to do it.

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

Now, all elements are correctly reset.

This. style. width = (this. offsetWidth & gt; 740 )? '740px ': 'auto'} "alt =" uploads/200602/13 _075115_diagram_05.gif "src =" http://files.jb51.net/upload/2007428212949621.gif ">

Figure 5 -- right is in the correct position

Step 5: Solve bugs and make the layout more perfect
If the browser window size changes, the center will become smaller than the left, and the perfect layout will be broken. We will set a min-width for the body.
To solve this problem, because IE does not support it, so there will be no negative impact, the adjustment is as follows:

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

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

* Html # left {
Left: 150px;/* RC width */
}

The size adjustment is based on the width defined above. You must adjust the size according to your actual situation.

Add padding now

The content and text are appended to the container's edge. I believe it will not be very comfortable for you to adjust it.

# Left {
Width: 180px;/* LC fullwidth-padding */
Padding: 0 10px;
Right: 200px;/* LC fullwidth */
Margin-left:-100%;
}

Of course, we can't just add left. Even if we're done, we have to add a series of elements. We also need to adjust and add padding to bring about new bugs. The adjustments are as follows:

Body {
Min-width: 630px;/* 2x (LC fullwidth +
CC padding) + RC fullwidth */
}
# Container {
Padding-left: 200px;/* LC fullwidth */
Padding-right: pixel PX;/* 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:-pixel PX;/* RC fullwidth + CC padding */
}
# Footer {
Clear: both;
}

/*** IE Fix ***/
* Html # left {
Left: 150px;/* RC fullwidth */
}

The padding of header and footer can be added at will, so we won't mention it here, and the length unit is more friendly with em (em allows users to adjust their font size using browsers)

But it cannot be used together. it is wise to select em and px to check the effect.

Element and other issues
Using http://www.positioniseverything.net/articles/onetruelayout/equalheight
Someone translated: http://www.blueidea.com/tech/web/2006/3210.asp
The method mentioned in is not explained in detail.

# Container {
Overflow: hidden;
}
# Container. column {
Padding-bottom: 20010px;/* X + padding-bottom */
Margin-bottom:-20000px;/* X */
}
# Footer {
Position: relative;
}

Solve the bug of opera 8 and adjust the Code 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:-pixel PX;
Background: # fff;/* Same as body
Background */
}