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

Source: Internet
Author: User
Tags wrapper

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.