Floating Inner Div to affect height of parent - css

Question

I've created a JSFiddle to describe what I mean:
http://jsfiddle.net/3yGLT/
I want my .top section to be affected by the height of the .floated-div, as you can see. At present, my .floated-div content drops over the .bottom section, which is not what I want. The height of the .floated-div needs to dictate the height of the .top section, effectively pushing .bottom down to make room for it.
I thought Clear divs were the solution I wanted, but it's not giving me the behaviour I'm after. I think this would only apply if the main content of .top was in a similar div to floated-div and not embedded in this way.
I can add things like clears, but I can't adjust the structure of this code as it's something that's generated through the CMS.
HTML
<section class="top">
<h1>test</h1>
<p>some content</p>
<div class="floated-div">
<h2>aside content</h2>
<p>some aside content</p>
<p>some aside content</p>
<div class="clear"></div>
</div>
<div class="clear"></div>
</section>
<section class="bottom">
</section>
CSS
.top{
width: 60%;
height:auto;
background:#f1f1f1;
}
.floated-div{
width:40%;
position:absolute;
right:0;
top:0;
}
.clear{
clear:both;
}
.bottom{
width: 100%;
height:100px;
background:#d1d1d1;
}

Answer 1

The problem is that your .float-div doesn't actually float. Because of the "position: absolute" rule it would never affect the height of the parent container (that's the meaning of absolute positioning). To make it float you need to remove this rule and add "float:right" to the div. In this case clearance will do its work.
floated-div {
float: right;
width: 40%;
}
Here is working example: http://jsfiddle.net/qvgz4/

Answer 2

i added this to your css and it worked :
.floated-div > p{margin:0;} /**added**/
.floated-div > h2{margin-bottom:0;}/**added**/
.top{
width: 60%;
height:auto;
background:#f1f1f1;
margin-bottom:5%; /*** added to avoid div overlap **/
}
basically <p> is taking extra area in floated-div1, cleared them through margin!!

Answer 3

If I understand the question correctly, I think the best option is to go with a display:table, like this CSS:
.top{ display:table; width:100%;}
.top .side { display:table-cell; padding:.5em;}
.top .left { width:60%; background:#f1f1f1;}
.top .right { width:40%;}
http://jsfiddle.net/3yGLT/8/

Answer 4

If you want the height of the top block to adapt to the height of the floated div, then you cannot absolutely position the floated div. Your only option then is to float it to the right.
But that will place it below the H1 and P that come before it. The only way to avoid that is to take the H1 and P out of the flow of the document. We do that with absolute positioning.
This solution works only if the height of the floated div is always going to greater than the H1 and P. You will also need to fiddle with the left and top positions of the H1 and P to get it just right.
http://jsfiddle.net/3yGLT/15/
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.top {
height:auto;
background:#f1f1f1;
}
.top > h1,
.top > p {
position: absolute;
width: 60%;
left: 10;
}
.top > p {
top: 40px;
}
.floated-div {
width:30%;
float: right;
}
.bottom{
width: 100%;
height:100px;
background:#d1d1d1;
}

Answer 5

Without touching html , you can do as below
.top{
width:100%;
background:#f1f1f1;
float:left;
}
.top > h1{
width:60%;
float:left;
position:relative;
}
.top > p{
width:60%;
float:left;
position:absolute;
margin-top:50px; // margin-top depend on your h1 height
}
.top .floated-div{
width:40%;
float:right;
}
.clear{
clear:both;
}
.bottom{
width: 100%;
height:100px;
background:#d1d1d1;
float:left;
}