Classic left and right columns layout CSS

/*************************************** ***************
*
* Classic left and right columns layout CSS
*
**************************************** *************/
/* Outer package Layer */
. Outdiv {
Overflow: hidden;/* automatically expands IE7, IE8, and FF boxes */
Zoom: 1;/* solves the automatic expansion of IE6 box */
}
/* Left */
. Left {
Float: left;
Display: inline;/* solves the problem of IE6 bilateral distance */
Margin: 20px;/* If margin is set here, the margin setting on the right is invalid */
_ Margin-Right: 17px;/* solves the IE6 3 pixel problem */

}
/* Right */
. Right {
Margin: 30px;/* The left margin here does not work, which is equivalent to margin-left: 0 ;*/
Overflow: hidden;/* automatically expands IE7, IE8, and FF boxes */
Zoom: 1;/* solves the automatic expansion of IE6 box */
}

 

Note: if there are more columns, we recommend that you use the margin attribute instead of padding for each box. If there are more than three columns, use ul Li for sorting.