Forum Moderators: not2easy
I have a containing block which holds 3 other blocks within and 1 of the 3 is floated to the right. No height is explicitly set and hopefully thats how I want to keep it.
The problem I'm facing is when the content within the floating box (rightside) makes the height of its block to be more than the the two non-floating boxes combined, the floating box overflows its containing box (container) instead of the containing block's height being adjusted to hold all its child blocks within.
IE6 is rendering it the way I want it to be, but I'm facing problems in firefox.
Any help will be greatly appreciated, thanks for your time in advance.
******* Sample Code ***********
<html>
<head>
<style type="text/css">
div#container
{ border:1px solid red; width:600; margin:0px auto;
padding:10px;
}
.box { border:1px dashed blue; margin:5px; width:300px;}
.rightbox { border:1px dashed green; float:right; width:225px;}
.rightbox p { font-size:larger; }
</style>
</head>
<body>
<div id="container">
<h3> containing box (red) </h3>
<p>No height is set for any of the blocks</p>
<div class="rightbox">
<p>What I'm trying to do is have to the containing block (id=container, red) have its height adjusted when the height of this rightside box exceeds that of the other non-floating ones and dont want it to overflow. </p>
<p>Any help will be much appreciated.</p>
</div>
<div class="box"><p>a box</p></div>
<div class="box"><p>another box</p></div>
</div>
</body>
</html>
******* END OF Sample Code *********
Another thing I dont understand is that when I move the <div> for the floating box to be the last block in its container, firefox renders it beneath and OUTSIDE its containing block. Please let me know why this happens.
div#container
{ border:1px solid red; width:600; margin:0px auto;
padding:10px;
}
.box { border:1px dashed blue; margin:5px; width:300px;}
.rightbox { border:1px dashed green; float:right; width:225px;}
.rightbox p { font-size:larger; }
.clr {clear:right}
</style>
</head>
<body>
<div id="container">
<h3> containing box (red) </h3>
<p>No height is set for any of the blocks</p>
<div class="rightbox">
<p>What I'm trying to do is have to the containing block (id=container, red) have its height adjusted when the height of this rightside box exceeds that of the other non-floating ones and dont want it to overflow. </p>
<p>Any help will be much appreciated.</p>
</div>
<div class="box"><p>a box</p></div>
<div class="box"><p>another box</p></div>
<br class="clr">
</div>
</body>
</html>
