Css-3 rows, 3 columns, and high-level layout graphic tutorial _ experience exchange

Css -- three rows, three columns, high 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

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

(740 )? '740px ': 'auto'} "alt = uploads/200602/13 _074820_diagram_01.gif src =" http://files.jb51.net/upload/2007428212947610.gif ">

-- Create a framework

Step 2: add content elements

Add content elements based on Step 1

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.

(740 )? '740px ': 'auto'} "alt = uploads/200602/13 _071_2_diagram_02.gif src =" http://files.jb51.net/upload/2007428212948399.gif ">

: 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

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

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

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

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

-- 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.

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

-- Right: You are 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's wise to choose em and px, http://www.jluvip.com/works/css/layout_c3_1.html href = "http://www.jluvip.com/works/css/layout_c3_1.html" target = _ blank> View Effect

Element and other issues
Http://www.positioniseverything.net/articles/onetruelayout/equalheight with href = "http://www.positioniseverything.net/articles/onetruelayout/equalheight" target = _ blank> http://www.positioniseverything.net/articles/onetruelayout/equalheight
Someone translated: http://www.blueidea.com/tech/web/2006/3210.asp href = "http://www.blueidea.com/tech/web/2006/3210.asp" target = _ blank> 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:

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