I have been using this technique before to get equal column heights

#page-wrap { overflow: hidden;}
.page-left, .page-right{float: left; width: 435px; margin-bottom: -5000px; padding-bottom: 5000px; }
.page-left { background: #454545; }            
.page-right { background: #383838; }

<div id="page-wrap">        
    <div class="page-left">
            Blahblah<br />
            Blahblah<br />
            Blahblah<br />
    <div class="page-right">
    <div class="clearboth"></div>    
</div> <!-- end wrap -->

This works fine but now I need to put #page-wrap inside another DV with margin: 10px;
it works fine in normal browsers, but not in IE...

I have a Fiddle here: http://jsfiddle.net/SyAeq/

EDIT: Solved! Just adding a {float:left} to #page-wrap did the trick!
Than a {clear:left} in a div underneath to clean it up

  • This question might be better asked on doctype.com. Dec 1, 2010 at 18:13
  • If you solved it yourself, you should post it as an answer, then when the time period has expired, mark your own answer as correct.
    – Mufasa
    Jun 23, 2011 at 21:32

1 Answer 1


Ok, solved this by adding a {float:left} to #page-wrap. Than a {clear:left} in a div underneath to clean it up.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.