Heigth stretching problem. FF/IE

  • Thread starter Thread starter helveticus
  • Start date Start date
H

helveticus

I am at a loss on how to stretch up in FF an outer div when a child
div is filled up (works ok in IE). I tried various approaches
including the underscore hack as shown below. Nothing appears to work.
Can someone tell me what is wrong with my code? TIA.

CSS:
html,body {height:100%;}
#main{width:960px;padding:2px;margin:10px auto;background-
color:#ff0; height:auto;}
#hdr { background-color:blue; min-height:50px;height:auto;_height:
50px; }
#cnt{border:15px solid black; min-height: 25px; height:auto;
background-color:#609EE4}
#col1{float:left;width:190px;background-color:#FFF;padding:5px
10px 5px 5px;border-right:dotted thin #274A79;min-height: 25px;_height:
25px;}
#col2{margin-left:215px; background-color:#D5E7FF; padding:5px;min-
height: 25px; height:auto;_height:25px; width: auto;}

HTML:
<body>
<form action="#">
<div id="main">
<p>Main</p>
<div id="hdr">
<p>Header beg</p>
<div id="cnt">
<div id="col1">
<p>col1 text</p>
<p>Donec fermentum condimentum nisi. Proin
iaculis mauris id lorem viverra molestie.
Duis vel orci. Et pulvinar pede ligula a sapien.</p>
</div>
<div id="col2"><p>col2 text</p></div>
</div>
<p>Header end</p>
</div>
</div>
</form>
</body>
 
Thanks for your proposal. The site is still a project. Finally, after
long hours of frustrating css tweaking, I gave up and decided to try
it via js using JQuery's equalheight plugin. This function is called
during the onload event and appears to do the trick in FF and ID. This
is one of the very few instances where IE behaves better than FF! ;=)
 
Back
Top