CSS web page layout introductory tutorial 5: Two column width adaptive_Basic tutorial

Starting from the two-column fixed width, when you start to try the two-column layout, the width of the left and right columns can be adaptive. From the one-column adaptive layout, we know that the adaptive setting is mainly set by the percentage value of the width, so in the two-column The width-adaptive layout also designs the percentage width value. Continuing with the above CSS code, we have to newly define the width value of the second column:

Copy code The 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 width of the left column is set to 20% of the width, and the width of the right column is set to 20% of the width. 70% of the page looks like a common web page with navigation on the left and content on the right.

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Two column width adaptive</title>