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>
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>