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.
