CSS web page layout introductory tutorial 6: fixed left column, adaptive right column width_Basic tutorial

In practical applications, sometimes it is necessary to have a fixed width of the left column and the right column to automatically adapt according to the size of the browser window. It is simple and feasible to implement such a layout in CSS. You only need to set the width of the left column, as in the above example. Both the left and right columns use percentages to implement width adaptation, and we only need to set the width of the left column to a fixed value, do not set any width value for the right column, and the right column does not float. The code is as follows:

Copy code The code is as follows:

#left {
background-color: #E8F5FE;
border: 1px solid #A9C9E2;
float: left;
height: 300px;
width: 200px;
}
#right {
background-color: #F2FDDB;
border : 1px solid #A5CF3D;
height: 300px;
}

In this way, the left column will show 100% width, and the right column will adapt according to the browser window size.

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>The left column of the two columns is fixed and the width of the right column is adaptive - AA25.CN</title> <style type="text/css"> <!-- #left { background-color: #E8F5FE; border: 1px solid #A9C9E2; float: left; height: 300px; width: 200px; } #right { background-color: #F2FDDB; border: 1px solid #A5CF3D; height: 300px; } --> </style> <div id="left">Left column - fixed (AA25.CN)</div> <div id="right">Right column - adaptive width (AA25.CN)</div>
[Ctrl A Select all Note:If you need to introduce external Js, you need to refresh it to execute]

Two-column right column width adaptive is often used on websites. It is not fair to use the right column or the left column. The method is the same. You only need to change the writing of the two divs. This application is currently in use. You can often see it on many blogs. For example, many netizens in pjblog have templates with this layout.
The production process will not be described in detail here. Please refer to the previous tutorial: CSS Web Page Layout Introduction Tutorial 5: Two-column width adaptive, just change the width of the left column to 200px, and remove the width and left floating of the right column. That