CODEWITHSUNDEEP
css
user1684636
user1684636

Reputation: 91

Why won't my DIV height grow? Is it because I am using floats?

Please help! I am trying to create some div sections and some of these div sections have some other divs that are floated. All of which I have cleared. But the sections are not growing to accomodate the content inside of them. The following is my HTML -

<div class="data">
    <div class="name">Data</div>
    <div class="first section">
        <div class="title">First Section</div>
        <div class="left settings">
            <div class="row">
                 <div class="field">First Name</div>
                 <div class="value">John</div>
            </div>
            <div class="row">
                  <div class="field">Last Name</div>
                  <div class="value">Smith</div>
            </div>
        </div>
        <div class="right settings">
            <div class="row">
                 <div class="field">ID</div>
                 <div class="value">321</div>
            </div>
            <div class="row">
                  <div class="field">Group</div>
                  <div class="value">Eng</div>
            </div>
        </div>
    </div>
    <div class="second section">
        <div class="title">Second Section</div>
    </div>
    <div class="third section">
        <div class="title">Third Section</div>
    </div>
</div>

The following is my CSS -

div.data {
    position: relative;
    top: 1em;
    width: 100em;
}

div.data div.name {
    color: #0066FF;
    font-weight: bold;
}

div.data div.section div.title {
    color: green;
    font-weight: bold;
}

/** first section **/
div.data div.first div.settings {
    position: relative;
    width: 799px;
    border-top: 1px solid;
    float: left;
}

div.data div.first div.left {
    border-left: 1px solid;
}

div.data div.first div.settings div.row {
    border-bottom: 1px solid;
    clear: both;
    height: 2em;
}

div.data div.first div.settings div.row div {
    float: left;
    height: 22px;
    padding: 5px;
    border-right: 1px solid;
}

div.data div.first div.settings div.row div.field {
    width: 192px;
}

div.data div.first div.settings div.row div.value {
    width: 585px;
}

/** second section **/
div.data div.second {
    clear: both;
}

For the first section, I have a title and a table that is made up of a left and right. Both of these are floated left and cleared. The rows of the left and right table have a field and value which are also floated left and right and cleared. At this point, I expect "first section" to grow as the content inside of it grows. But instead the height is stuck at 22px, the same height as the section title!

What is going on? I tried overflow:auto for div.section and that worked. But when I tried to set this style for div.settings in "first section":

div.data div.first div.settings {
     position: relative;
     top: 1em;
}

I end up with these scroll bars, instead of the height growing to fit the new changes. And everything was out of whack. I am really at my wit's end trying to figure this out. If anyone can give me any suggestions on what I am doing wrong, it would be a great help.

Thanks.

Upvotes: 0

Views: 225

Answers (1)

Will
Will

Reputation: 4705

If you want an element to grow with the height of its floated contents, it either needs to be floated itself, or apply a clear after the floated content.

a common solution to this is clearfix

        .clearfix:before,
    .clearfix:after {
        content: " "; /* 1 */
        display: table; /* 2 */
    }

    .clearfix:after {
        clear: both;
    }

    /*
     * For IE 6/7 only
     * Include this rule to trigger hasLayout and contain floats.
     */

    .clearfix {
        *zoom: 1;
    }

I'm not quite clear on the layout your are trying to achieve for your specific case, but I think you could look at applying a clearfix class to your left and right sections.

https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css

I tried to recreate the issue - http://codepen.io/anon/pen/cIoGt

Try getting that to show the issue more clearly if you need further assistance

Upvotes: 1

Related Questions