Author: Dodo [website refactoring] One of the translators, the original text here: http://www.donews.net/dodo/archive/2005/05/16/382248.aspx, need to reprint the first contact author.
This idea comes from Keso.
Today, Keso said, for a left-right 3 column layout of the page, such as home.donews.com, the user most want to see is the information in the column, about 2 columns in fact, the relevant information of the site's navigation entrance, so the information is the most important, should be in the page display order priority on the left and right 2 columns. Or you can say that is to put the most important information on a page priority on the other elements of the page, whether it is 3 or 2 column layout, very right.
The browser display page is a line of the execution of the code, that is, written in front of the first to perform the display, and for the left in the right 3 column layout design, the code is either from the left-->--> right to write, or to come over from the right-->--> Zolai writing, To achieve the effect of Keso said, the first thing to write is the code in the column. So I first defined a id=m div, and padding-left:150px, to define this is to leave the left column 140PX display position, and then nested in this div to define a id=middle div, I use position: Absolute attributes (absolute positioning), and then define left and right columns. One bad thing about using Position:absolute's properties is that it's like a layer in Photoshop, its automatic extension doesn't drive the entire layout, so it hides some page elements, like we usually write some information about the copyright at the bottom of the site, If you use this method of displaying the column first, the information will be obscured if you do not process it. The way to deal with this is to use JavaScript, so that the height of the left and right 2 columns is automatically extended along with the column.
The following is the implementation of the code, interested friends can copy back to try, but also welcome message exchange.
BTW: This and Liu Yan, Keso revision donews.com, the benefit of the Philippines, they are really understand the user needs, understand the site.
<! DOCTYPE HTML PUBLIC "-//w. 3C//DTD XHTML 1.0 transitional//en "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<meta http-equiv= "Content-language" content= "gb2312"/>
<meta content= "All" name= "robots"/>
<meta name= "Author" content= "Designed by Dodo at donews.com"/>
<title>web Standard Website Design example: Left middle right 3 column layout first display the contents of the middle column method </title>
<style>
body{font-size:12px;}
Div{color: #fff}
#m {padding-left:150px}
#middle {position:absolute;
background:red;width:468px;
Margin-right:auto;
Margin-left:auto;
padding:0px;
}
#left {float:left;background:green;width:140px;height:30px}
#right {float:right;background:blue;width:140px}
#all {width:770px;
Margin-right:auto;
Margin-left:auto;
padding:0px;
Color: #000;
Background: #ffa200;}
#footer {clear:both;background: #808080; color: #fff}
</style>
<body>
<div id= "All" >
<div id= "M" >
<div id= "Middle" >
Middle column <br/>
· It person's Way Out series Thinking (iii): Improve learning ability and can be held. [Familiarise] 11th
Alexa, who is the next target for hackers? [Lan Ying] 11th
· It people's way out of the series Thinking (ii): Thinking Innovation strategy and seek to set. [familiarise] 11th
· It people's way out of the series Thinking (i): Project and work [familiarise] 11th
• New generation of notebook purchase rules after Seagate [Xinhua Mei Tong] 11th
· Miko Mi: Struggling out of the sea of history [Zhou Jing wave] 11th
• The first to launch rental housing, second-hand housing source RSS Subscription services [Turtle Rabbit] 11th
· TOM posted the first quarter report of 2005 [Xinhua Mei Tong] 11th
* Huang Hua: Is it necessary for us to have a meeting? [Huanghua] 11th
· It person's Way Out series Thinking (iii): Improve learning ability and can be held. [Familiarise] 11th
Alexa, who is the next target for hackers? [Lan Ying] 11th
· It people's way out of the series Thinking (ii): Thinking Innovation strategy and seek to set. [familiarise] 11th
· It people's way out of the series Thinking (i): Project and work [familiarise] 11th
• New generation of notebook purchase rules after Seagate [Xinhua Mei Tong] 11th
· Miko Mi: Struggling out of the sea of history [Zhou Jing wave] 11th
• The first to launch rental housing, second-hand housing source RSS Subscription services [Turtle Rabbit] 11th
· TOM posted the first quarter report of 2005 [Xinhua Mei Tong] 11th
* Huang Hua: Is it necessary for us to have a meeting? [Huanghua] 11th
</div>
</div>
<div id= "Left" > Left-Hand column </div>
<div id= "Right" > right-hand column <br>
</div>
<div id= "Footer" > Bottom page </div>
</div>
<script language= "JavaScript" >
document.getElementById ("left"). Style.height=document.getelementbyid ("Middle"). scrollheight+ "px"
document.getElementById ("right"). Style.height=document.getelementbyid ("Middle"). scrollheight+ "px"
</script>
</body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
