In a fixed width, we use margi:0px auto, so that a div can be centered display, and two columns in the column, you need to control the left side of the column and the right side of the left is equal, so use margi:0px auto; it seems to not be able to achieve the effect of Ning In this case, you need to do a div nested design to complete, you can use a center div as a container, inclined two columns of two div rotation in the container, so as to achieve the display of two columns, combined with the above code, the new XHTML code structure is as follows:
<textarea id="runcode24395"><! 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> Zolie columns </body> </ptml></textarea>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
#layout有了居中的属, the contents of the natural inside can also be centered, the problem here is the width of the #layout definition, the width of the #layout is set to 404px, because in the previous tutorial, the real width of an object is the sum of its various properties, While the left width is 200px, but there are 1px margins around, so the actual width is 202px,right object is the same, in order to let layout as a container can load them two, the width is changed to the left and right of the actual width and, then set to 404px, so , a two-column center display is implemented.
The two-column width centering is very widely applied on the actual website.
