Starting with a fixed width of two columns, the left and right column widths are self-adapting in the case of a two-column layout, and we know from a list of adaptive layouts that the set-up is mainly set by the percent value of the width, so the two-column-width-adaptive layout is also the design of the percent-width value, continuing the CSS code We have to define a new two column width value:
Copy CodeThe code is 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%, the right column width is set to 70% of the width, and looks like a navigation to the left, and a common Web page form for content on the right.
<textarea id="runcode72198"><! 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> left column-(AA25. CN) Right column--Two column width adaptive (AA25. CN) </body> </ptml></textarea>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
Why isn't the right column set to 80% to achieve the overall 100% effect?
The reason for this problem incense from the other properties of the object, you should remember, in order to make the layout clearer in the preview, we used the border property, so that two objects have a 1px border, and in the CSS layout, the width of an object is not only determined by the width value, The true width of an object is the width of the object itself, the left and right margins of the object, and the left and right borders, plus the padding of these attributes, so that the object on the left is not just 20% of the browser window, but also the width of the left border. This calculates that the left and right columns are beyond the width of their own percentages, the final width is also more than the width of the browser window, so the left column will be squeezed out of the second row display, thus promoting the effect of the sidebar, so here is not 100% of the width of the sum, and in the actual application, can be avoided by the use of borders and to achieve the effect of the browser fills the left and right. Such a question about the width calculation, is very important in the CSS layout is known as the box model of the problem, in a later tutorial will be explained in detail, please continue to follow the tutorial on this site.
This example of the production process and CSS page layout Getting Started Tutorial 4: Two columns fixed width, but when the width of the fixed fixed 200px is replaced by 20% and 70%, not repeat here.
