Floating Inner Div to affect height of parent

Question

I've created a JSFiddle to describe what I mean:

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

Read my answers [here](http://stackoverflow.com/questions/12871710/why-clear-both-css/12871734#12871734) and [here](http://stackoverflow.com/questions/16568272/how-css-float-works-why-height-of-the-container-element-doesnt-increase-if-it/16568504#16568504) to understand why this happens — Mr. Alien, Nov 22 '13 at 12:11

score 1 · Accepted Answer · answered Nov 22 '13 at 11:41

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/

answered Nov 22 '13 at 11:41

tunya

36
2

My aside content is still over the .bottom which is not what I want. I want the height of the aside content to dictate the overall height of the .top section. – Dan Hanly Nov 22 '13 at 11:43
I adapted this to work with the constraints of my CMS and it appears to work fine. http://jsfiddle.net/8VC8k/3/ - you'll note that the H1 element has to stay at the top. Thanks for this! – Dan Hanly Nov 22 '13 at 12:25

score 0 · Answer 2 · answered Nov 22 '13 at 11:38

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

Mark Simpson · Answer 3 · 2013-11-22T12:06:23.757

0

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

edited Nov 22 '13 at 12:06

answered Nov 22 '13 at 11:38

Mark Simpson

2,344
2
23
31

This makes the whole header grey, which is what I think he was trying to avoid. – Dan Goodspeed Nov 22 '13 at 11:39
I can't change my HTML like that, as mentioned in the question. I can't wrap my content in one div and my floated content in another. – Dan Hanly Nov 22 '13 at 11:40
@DanGoodspeed this is the behaviour I want, but for my situation I can't modify the HTML like this. – Dan Hanly Nov 22 '13 at 11:40
@danielhanly.com I've updated my answer. Please check this new solution. – Mark Simpson Nov 22 '13 at 12:00

score 0 · Answer 4 · answered Nov 22 '13 at 11:48

0

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/

answered Nov 22 '13 at 11:48

Dan Goodspeed

3,484
4
26
35

I can't do it. I can't wrap the h1 and ps into a separate div to the floated one. I've explained this in the question, and in comments on @MarkSimpson's question – Dan Hanly Nov 22 '13 at 11:49
Do you want the grey background going all the way across, or only on the left 60%? – Dan Goodspeed Nov 22 '13 at 11:59

score 0 · Answer 5 · answered Nov 27 '13 at 10:40

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

Floating Inner Div to affect height of parent

5 Answers5