In a fixed width of a column, we use margi:0px auto; This setting allows a div to be centered, while the two columns need to control the left side of the left column and the right column to the right, so use margi:0px auto; it does not seem to be able to achieve the effect of Ning production, Then you need to do the nested div design to complete, you can use a center div as a container, 'll two columns two div rotation in the container, so as to achieve the two column display, combined with the above code, the new XHTML code structure is as follows:
<textarea id= "runcode51086" > <! 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 centered--aa25. cn</title> <style type= "Text/css" > <!--#layout {width:404px; margin-top:0px; Margin-right:auto; margin-bottom:0px; Margin-left:auto; } #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= "Layout" > <div id= "Left" >-Left-Hand </div> <div id= "Right" > right-hand column </div> </div> </body> </ptml> </textarea>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
#layout有了居中的属, the contents of nature can also be centered, and the problem here is that the width of the #layout is defined and the width of the #layout is set to 404px because, as I learned in the previous tutorial, the true width of an object is made up of its various attributes. The left width is 200px, but there are 1px margins, so the actual width is 202px,right object as well, in order to allow layout as a container can install them two, the width becomes the actual width of left and right, and then set for 404px, so , a two-column center display is implemented.
The two-column width is centered on the actual web site and is widely used.
