Web Standard: Three or two-column and three-column layouts

Knowledge Points:

1. Two columns Adaptive width 2. Two column fixed width 3. Two column fixed width centered 4.xhtml block-level element (div) and inline element (span) 5.float attribute 6. Three column adaptive width 7. Three column fixed width 8. Three Column fixed width center 9.ie6 3 pixels bug  1) Two columns of adaptive width div is block-level element, by default occupy a row of space, want to let the following div to the right, you need to do CSS floating to achieve. Add Float:left to the #side; you can see that when we do not add float, the div occupies a row, but if you add the Float:left, you can see that the div is floating to the far left, and the width of the Occupy is the width we set 120px The detailed information about float can be viewed in the following article, which is detailed: http://paranimage.com/css-float-attribute/ 2) two columns fixed width and two column adaptive width are different, Just give two div a fixed width, for example, the width of main is set to "width:350px;" &NBSP;3) Two column fixed width centered on using {float:left;} , if the {Margin:auto;} is not working, it cannot play a central role because {margin:0 auto;} A block-level element with a width attribute can be centered horizontally, but it usually works only on static elements (no floats, no positioning). Here we can add a parent div to the two Div, the width of the parent div is set to the sum of the widths of the two sub-Div, and then the parent div is centered. 4) XHTML block-level elements (div) and inline element (span) block-level elements: a block, like a paragraph, that takes up a line by default, which is equivalent to inserting a newline before and after each. General block-level elements such as: paragraph <p>, title  6) Three-column adaptive width Three column adaptive width, commonly used structure is left column and right column fixed, the middle according to the browser width adaptive. Note: The order of three div must first put two floating side and Side1 plus, and finally add main, otherwise side1 will run to the following, this temporarily did not understand why, first so remember it. 7) Three-column fixed width if you want to make the three columns fixed width, and two columns fixed width, as long as the three div plus a fixed-width parent Div, if you want him to center, add a {margin:0 Atuo to the parent div;} Can 8) IE6 3 pixel bug Add {margin-right:-3px to #side and #main;} Can solve this problem note: Add _margin-right:-3px on the #side, preceded by an underscore, so that this style is specifically for IE6 effective, under the IE7 or normal display or if the three columns are fixed width, you can use {float:right;} , because the above method can not be verified by the.

Web Standard: Three or two-column and three-column layouts