Height of parent div not adjusting

Question

I'm trying to create a fluid layout, but have a small problem with the height of the container. The outer <div> (yellow, ip_A-1) is not adjusting to the height of it's children.

See a fiddle here.

I've tried placing a spacer inside but it's not working. Also making ip_BA_1 and ip_BB_1 position:relative does nothing.

The HTML:

<div class="ip_A_1">
    <div class="ip_BA_1">Hello I am a label that has to wrap</div>
    <div class="ip_BB_1">
        <div class="ip_BBA_1">Hello I am a text that has to wrap. 
                              Hello I am a text that has to wrap. 
                              Hello I am a text that has to wrap.</div>
    </div>
    <div class="spacer_0"></div>
</div>

<div class="spacer_0"></div>

<div class="ip_A_1">
    <div class="ip_BA_1">Hello I am a label that has to wrap</div>
    <div class="ip_BB_1">
        <div class="ip_BBA_1">Hello I am a text that has to wrap. 
                              Hello I am a text that has to wrap. 
                              Hello I am a text that has to wrap.</div>
    </div>
    <div class="spacer_0"></div>
</div>

The CSS:

.spacer_0 {
    clear:both;
    width:100%;
    height:0px;
}
.ip_A_1 {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 28px;
    text-align: left;
    font-family:'Calibri', 'Gill Sans', 'Helvetica', sans-serif;
    font-size:1em;
    background: yellow;
}
.ip_BA_1 {
    float: left;
    width: auto;
    padding: 4px 10px 20px 45px;
    font-family:'Calibri', 'Gill Sans', 'Helvetica', sans-serif;
    font-size: 0.88889em;
    line-height: 0.88889em;
    font-weight: bold;
    background: blue;
    color: white;
}
.ip_BB_1 {
    clear: both;
    float: left;
    margin-top: -15px;
    width: 100%;
}
.ip_BBA_1 {
    position: absolute;
    left: 30px;
    right: 0px;
    padding-left: 6px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: #ccc;
    border: 1px solid #666;
}

You should read about [clearfix](http://stackoverflow.com/questions/8554043/what-is-clearfix). — SeinopSys, Feb 24 '14 at 11:13
Not working, because of the `position: absolute` @chadocat mentioned. And there is already a `clear: both` in there with the *spacer_0* — Michel, Feb 24 '14 at 11:31

score 3 · Accepted Answer · answered Feb 24 '14 at 11:13

3

The problem is that you are using floats and position:absolute; on the children these rules prevent the children from expanding parents height.

answered Feb 24 '14 at 11:13

web-tiki

99,765
32
217
249

You're right. If I change *ip_BBA_1* to `position:relative` the container grows in height. But then I can't give *ip_BBA_1* the full width minus the 30px left. Any tought on that? Or should I jus ad another div in there? – Michel Feb 24 '14 at 11:18
1

@Michel The problem is I am not shure what your aim layout is so I won't be able to answer your question correctly. Could you be more precise about the wanted position of all elements pls. – web-tiki Feb 24 '14 at 11:31
The layout in the fiddle is like it should be, except for the position of the second `
`. My aim is to get the text div (the grey one) 100% of the screenwidth with te margin of 30px left. Here is the [fiddle full screen](http://jsfiddle.net/9d33A/embedded/result/). If you change the width of the browser, you see the label and the content wrapping and changing height. Only the parent container (the yellow one) does nothing, so the second container overlaps the first one.
– Michel Feb 24 '14 at 11:45

score 0 · Answer 2 · answered Feb 24 '14 at 11:39

0

change the ip_BBA_1 css position:relative.

answered Feb 24 '14 at 11:39

chandu

2,276
3
20
35

If I do that, the width of *ip_BBA_1* becomes 100% + 30px margin-left, so it runs out of the container on the right side. – Michel Feb 24 '14 at 11:47

Height of parent div not adjusting

2 Answers2