Why won't my DIV height grow? Is it because I am using floats?
- by user1684636
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.
