With a set of fixed widths as the basis, the two-column fixed width is very simple, we know that div for the identification of a certain area, and the layout of two columns, naturally need to use two div,xhtml code as follows:
Copy Code code as follows:
<div id= "Left" > Left-Hand column </div>
<div id= "Right" > right-hand column </div>
Two IDs are used in the new code structure. Left and right, representing the names of two Div, what we need to do is to first set the width for them, and then let two div be displayed side-by level in the horizontal row, resulting in a two-column layout, CSS code as follows:
<textarea id="runcode95911"><! 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 fixed width--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; Float:left; height:300px; width:200px; }--> </style> </pead> <body> <div id= "left" > Left-Hand column </div> <div id= "Right" >, right-hand column < /div> </body> </ptml></textarea>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
The code for left and right two Div is similar to the previous one, and uses the same width and height, in this case, to differentiate between the column and the column, with different border and background colors. In order to achieve the two-column layout, we used a completely new attribute--float. Float property is a very important attribute in CSS layout, used to control the floating layout, most of our div layout is basically through float control to achieve layout, float optional parameters are: None/left/right.
Float means that the object does not float when you use the None value, and when you use left, the object floats, for example, the DIV in this example uses Float:left, and then the right side of the object flows to the right of the current When you use right, the object floats to the left, and if the float value of left is set to right, it floats to the right-hand side of the Web page, and the Right-side object floats to the left-hand side of the page because of the Float:left property.
Thus, after using the simple float property, the two-column fixed-width can be fully displayed.
The specific steps are as follows:
To create a new page, insert a div to refer to: Introduction to CSS page layouts 1: A column fixed width
When you insert a div, then insert the second one, inserting a div tag with an extra option: wrapping the selection next to it, inserting the div tag into the DIV with the ID left, which is not the result of this example, so we chose the tag, The <div id= "#left" is found in the Drop-down list on the right-hand side, so that the div with the right ID inserted is inserted behind the left. As shown in the following illustration:
The left CSS settings are as follows:
The right setting is only different from the left border and the background color, and you can refer to Left's self setting.
