: CSS equal height divs with padding 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:

@Lengel546

Posted in: #Css

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>
<div class="page-right">
Blahblah
</div>
<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: 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

Vote Up Vote Down

Login to post a comment!