CSS and other high layout

Do some background projects, and a side bar project when the Ascend layout is very common, summed up the following several

1.margin-bottom method

Here is a direct introduction to what I think is the best auto-equality method for Sidebar/column height. The core CSS code is as follows (values are not fixed):

margin-bottom:-3000px; padding-bottom:3000px;

You can then match the properties of the parent tag to overflow:hidden achieve a highly automatic equality effect.

To give a simple example, the following CSS and HTML code:

#content {Overflow:hidden;}. left{width:200px; margin-bottom:-3000px; padding-bottom:3000px; background: #cad5eb; float:left;}. right{width:400px; margin-bottom:-3000px; padding-bottom:3000px; background: #f0f3f9; float:right;}. center{margin:0 410px 0 210px; Background: #ffe6b8; height:600px;}

<div id= "Content" >    <div class= "left" > Ieft, no height attribute, adaptive to highest column height </div>    <div class= "right" > right, no height attribute, adaptive to the highest column height </div>    <div class= "center" > middle, Height 600 pixels, height of left two columns and adaptive </div></div >

Follow up and slowly summarize the more practical several

Reference: Http://www.w3cplus.com/css/creaet-equal-height-columns
Http://www.w3cplus.com/css/two-cloumn-width-one-fixed-width-one-fluid-width

CSS and other high layout