Thread: Expanding a div height

OK. I have a page setup like this:-

Code:

<div class="register_label">
<asp:Label ID="lblEmailTo" runat="server" CssClass="blue336799_8" Text="To:" />
</div>
<div class="register_txt">
<asp:DropDownList ID="ddlEmail" runat="server" CssClass="textbox8" />&nbsp;
<asp:TextBox ID="txtEmailToAdd" runat="server" CssClass="textbox8" Text="Enter Email" Width="100" MaxLength="60" Style="color: #C8C8C8;" />&nbsp;
<asp:Button ID="btnEmailToAdd" runat="server" CssClass="button_16px_blue" Text="Add" OnClick="btnEmailToAddOnClick" />
<table cellpadding="0" cellspacing="0" border="0" style="height: 100%;">
<asp:Repeater ID="repEmailTo" runat="server">
<ItemTemplate>
<tr>
<td>
<asp:Label ID="lblEmail" runat="server" CssClass="blue336799_8" Text='<%#Eval("data") %>' />&nbsp;
<asp:ImageButton ID="lnkEmailRemove" runat="server" ImageUrl="/images/cancel10x10blue.gif" CommandName="Edit" Style="background-color: #EDF0FD;" />
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
</div>
<div style="clear:both;"></div>
<div class="register_label">
<asp:Label ID="lblPriority" runat="server" CssClass="blue336799_8" Text="Priority:" />
</div>
<div class="register_txt">
<asp:DropDownList ID="ddlPriority" runat="server" CssClass="textbox8" />
</div>

There are several other divs in the same format below these.
When I add an item to the repeater, the container div isn't expanding the height, so the items that are appearing in the list are underneath the ddlPriority dropdownlist and these divs aren't being pushed down the screen.
What am I doing wrong?

What's the CSS for this class: register_txt?

Sorry J...I meant to post that as well

Code:

.register_label
{
    float: left;
    text-align: right;
    padding-right: 2px;
    width: 34%;
    height:30px;
    vertical-align:middle;
}
.register_txt
{
    float: right;
    text-align: left;
    padding-left: 2px;
    width: 64%;
    vertical-align:middle;
}

From what you've posted, I don't see what could be causing this behavior. Since you didn't specify a height for register_txt, overflow wouldn't be a problem. I would start by removing the 100% height on the table, though, and see what happens.

I tried that as well J, but no luck.

I did have a height on register_txt but I removed it. I did a Ctrl Refresh so that should have cleared the cache...

OK. I changed the wrong css file. I've got rid of the height in the correct file, but now it fouls up the rest of the CSS.

What's fouled up?

I fixed the problem by adding a min-height value to the divs holding lblEmailTo and the repeater.

This works fine until you add an item to the repeater and then the lbl div doesn't expand with the txt div. So, the Priority label doesn't shift down with the Priority dropdownlist.

Also, the min-height doesn't work in IE6, but I can just add a height value to my ie6 CSS file.

How do I get them to expand together?

I removed this div:-

Code:

<div style="clear:both;"></div>

Would adding that back help?

Currently, CSS doesn't allow you to have same-height div's. Check this search: CSS same height divs

You'll see some possible solutions...

Regardless, I don't like the way you're building your form. So, I'm going to show you this link which demonstrates how I do it...and it works really well: CSS-Based Forms: Modern Solutions | CSS | Smashing Magazine

Ok. I added:-

Code:

<div style="clear:both;"></div>

After the repeater holder div and that seems to have sorted it.