css| Web Page This article was originally my own translation of learning materials, I think this method is good, so share with you.
With the help of the husband to learn the Web standards just half a month, some places may not be very accurate translation, if there are objections, please put forward, I will immediately amend.
-------------------------------------------------------
Author:Alan Pearce
Original:Multi-column Layouts climb out of the Box
Address:
http://alistapart.com/articles/multicolumnlayouts
We all know that the same height of the layout is very troublesome, there are a lot of relevant information about the design methods, so I do not have much to explain.
Recently in the study of a two column dynamic layout, each column background is different. I immediately remembered Dan Cederholm's faux Columns, but I still needed a dynamic layout approach. I looked at the perfect layout of article one True Layout, but there are many bugs that require a lot of comments and programs. Even consider using Javascrip to achieve the column always maintain the same height, but not. Despair, almost to use table layout, no, there must be a better way. I think of a question, "What's out there?" border! If I can make "sidebar" (or "rail") div relative to the "content" of the div float, you can achieve the same height of multiple columns. This method has been introduced in a number of places: Douglas Livingstone's introduced, Holly extended John Bergevin's position is Everything. Developed from the method of one true layout, the dynamic changes of two columns were achieved with more concise and clear code. Here's the code:
HTML:
<div id= "Container" >
<div id= "Content" >this is<br/>some content</div>
<div id= "Rail" >this is the rail</div>
</div>
CSS:
#container {
Background-color: #0ff;
Overflow:hidden;
width:750px;
}
#content {
Background-color: #0ff;
width:600px;
border-right:150px solid #f00;
/* The width and color of the rail * *
margin-right:-150px; * Hat tip to Ryan Brill * *
Float:left;
}
#rail {
Background-color: #f00;
width:150px;
Float:left;
}
Add border to the content div right, color width and rail, and float relative to rail. margin:-150px to move the rail div to the space vacated by the Margin. If the content div becomes taller than the rail Div, the border is higher with the content Div. The visual effect is as if the rail div is also getting taller. Container color settings and content div, if the rail div to achieve the highest, container with the higher, so that the content of our higher effect.
Look at the effect. The IT in action. Try changing the font size and the layout changes.
3 columns: 3 colors
The layout of 3 columns is somewhat different: directly to container div plus border.
HTML:
<div id= "Container" >
<div id= "center" >center<br/>column center</div>
<div id= "Leftrail" >left rail</div>
<div id= "Rightrail" >right rail</div>
</div>
CSS:
#container {
Background-color: #0ff;
Float:left;
width:500px;
border-left:150px solid #0f0;
/* The width and color of the left rail * *
border-right:200px solid #f00;
/* The width and color of the right rail * *
}
#leftRail {
Float:left;
width:150px;
margin-left:-150px;
position:relative;
}
#center {
Float:left;
width:500px;
margin-right:-500px;
}
#rightRail {
Float:right;
width:200px;
margin-right:-200px;
position:relative;
}
The middle column margin-right:-150px makes the left rail div always float along the left side of the middle column, making the side column appear in the true position. There are some methods that can be implemented, but this is the best way to achieve a mobile layout (dynamic layout).
Because the sidebar is outside the container div, floating on the border. Use Overflow:hidden to hide: ie does not support, Firefox can be implemented. Sidebar does not need to set the color, it will be in the container div color consistency.
Flow Layout
After understanding the fixed-width layout, I tried to use this method in a dynamic layout. The sidebar still needs to be set to a fixed width, and many browsers do not support border:**% properties. But we can make the middle column adaptive.
3 Columns Adaptive layout
The method is simple, no need to refer to pictures, no bugs.
Html:
<div id= "Container" >
<div id= "center" >center Column content</div>
<div id= "Leftrail" >left<br/> sidebar</div>
<div id= "Rightrail" >right sidebar</div>
</div>
CSS:body{
margin:0 100px;
padding:0 200px 0 150px;
}
#container {
Background-color: #0ff;
Float:left;
width:100%;
border-left:150px solid #0f0;
border-right:200px solid #f00;
margin-left:-150px;
margin-right:-200px;
Display:inline; /* So IE plays nice * *
}
#leftRail {
Float:left;
width:150px;
margin-left:-150px;
position:relative;
}
#center {
Float:left;
width:100%;
margin-right:-100%;
}
#rightRail {
Float:right;
width:200px;
margin-right:-200px;
position:relative;
}
Effect:
Run Code Box
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><ptml xmlns=" http://www.w3.org/1999/xhtml "><pead><meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/><title>css</title><style type=" text/css "><!--body{margin:0 100px; padding:0 200px 0 150px;} #container {background-color: #0ff; Float:left; width:100%; border-left:150px solid #0f0; border-right:200px solid #f00; margin-left:-150px; margin-right:-200px; Display:inline; /* So IE plays nice */} #leftRail {float:left; width:150px; margin-left:-150px; Position:relative;} #center {float:left; width:100%; margin-right:-100%;} #rightRail {float:right; width:200px; margin-right:-200px; Position:relative;} --></style></pead><body><div id= "Container" > <div id= "center" >center Column content</div> <div id= "Leftrail" >left<br/> <div id= "Rightrail" >right sidebar</div></div></body></ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
