Starting with a fixed width of two columns and beginning with a two-column layout, the left and right column widths can be adapted, and from a list of adaptive layouts we know that setting the adaptation is mainly through the percentage value of the width, so in the two column width adaptive layout is also the design of the percentage width value, continue to the above CSS code, We have to define the width of the two column:
Copy Code code as follows:
#left {
Background-color: #E8F5FE;
border:1px solid #A9C9E2;
Float:left;
height:300px;
width:20%;
}
#right {
Background-color: #F2FDDB;
border:1px solid #A5CF3D;
Float:left;
height:300px;
width:70%;
}
The left column width is set to width 20%, and the right column width is set to 70% of width, which looks like a common page form with navigation on the left and content on the right.
<textarea id="runcode92396"><! 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> two column width adaptive--aa25. cn</title> <style type= "Text/css" > <!--#left {background-color: #E8F5FE; border:1px solid #A9C9E2; Float:left; height:300px; width:20%; } #right {background-color: #F2FDDB; border:1px solid #A5CF3D; Float:left; height:300px; width:70%; }--> </style> </pead> <body> <div id= "left" > Left-Hand column--(AA25. CN) </div> <div id= "Right" > right-hand column--Two column width adaptive (AA25. CN) </div> </body> </ptml></textarea>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Why not set the right column to 80% to achieve the overall 100% effect?
The reason for this problem is that incense starts from the other attributes of the object, as you can recall, in order for the layout to be clearer in the preview, we used the border property so that all two objects have a 1px border, and in the CSS layout, the width of an object is not only determined by a width value, The real width of an object is the width of the object itself, the left and right margins of the object, the left and right borders, and the interior margins, so the object on the left is not just the width of 20% of the browser window, but also the width of the left border. That way, the left and right columns are more than their own percentage width, the final width is also greater than the width of the browser window, so the right column will be squeezed out of the second row to display, thus driving the effect of the left and the bar, so here is not 100% of the width of the sum, and in practical applications, you can avoid the use of borders and margins, and to achieve the effect of the browser filled. Such a question about width calculation, is very important in CSS layout is called the box model of the problem, in the future tutorial will be explained in detail, please continue to focus on the site of the tutorial.
This example of the production process and CSS page layout Introductory tutorial 4: Two column fixed width, except for the fixed width when setting fixed 200px width of 20% and 70% respectively, no longer repeat.
