What's the reason that the left and right column always equal the center's height

the css:



#content{overflow:hidden;}

   .left{width:200px; margin-bottom:-200px;padding-bottom:200px; background:#cad5eb; float:left;}

   .right{width:400px; margin-bottom:-200px; padding-bottom:200px; background:#f0f3f9; float:right; }

   .center{margin:0 410px 0 210px; background:#ffe6b8; height:100px;}


the html:



<div id="content">  
  <div class="left">hello</div>  
 <div class="right">right </div>  

  <div class="center">center</div>

</div>

what’s the reason that the left ,right column always equal the center’s height.if the margin-bottom:-200px;padding-bottom:200px value are bigger than the center’s height value.

i am also confused, when i change the .left padding-bottom to 400px;why the right’s padding-bottom also change to 400px. the default’s value 200px is useless.

The technique used, is called the One true layout. By adding a high padding (height to those columns) and a negative bottom margin the browsers are fooled as if those columns have an equal height as the middle column. I used this method for quite some time until some people pointed me to some problems that might occur when using this technique. You can read those here

Hi,

what’s the reason that the left ,right column always equal the center’s height.if the margin-bottom:-200px;padding-bottom:200px value are bigger than the center’s height value.

As Donboe said that is the one true layouts basic code and it achieves the equal effect by setting a large arbitrary padding bottom value to make the columns as long as will ever be needed. To hide the extra long column a negative margin equal to the height of the padding is used and shortens the box back to content height in real terms.

However the extra long column is still actually visible although it wouldn’t really take part in the flow of the document. To hide the erroneous part of the column a parent element is needed to encompass all columns and has its overflow set to hidden which hides all the columns that were effectively sticking out of the bottom.

As the content increases the parents height increases and the bits that were invisible are made visible in even amounts and appear to equalise.

However, this method has a very serious drawback and the reason it is hardly ever used because it fails if any “in page links” are navigated to in that section (via fragment identifiers). When a link destination is reached to the all content above the link disappears above the overflow:hidden element and can never be reached. It’s basically a show stopper unless you are only using it for very small boxes and have no in page links in that section.

i am also confused, when i change the .left padding-bottom to 400px;why the right’s padding-bottom also change to 400px. the default’s value 200px is useless.
No, you misunderstand how it works as the extra padding you added to the left just happens to match the real height of those columns (400px -200px) and you just still see the equal effect. If you added padding-bottom:500px to the left column you would see that the right column would then stop 100px short.

The margin-bottom shortens the elements height but does not shorten its content which then overflows which is what happens to the column colours.

Try the examples without the parent wrapper (the one with overflow:hidden applied) to see for yourself what is really happening.