Textarea (asp:Textbox TextMode="Multiline") overlapping buttons

Question

Hi all,

I'm having this problem with form buttons overlapping an asp:Texbox with TextMode set to multi-line:

Here is the code:

<asp:Panel ID="pnlGiftStep" Visible="false" runat="server">
                <img src="/images/shopping-cart/form-separator.png" alt="separator" />
                <div class="form-title">GIFT OPTIONS</div>
                <div class="row">
                    <asp:TextBox ID="txtGiftName" Height="31" Width="323" BorderStyle="None" Font-Names="Arial"
                        Font-Size="116.7%" runat="server"></asp:TextBox>
                    <cc1:TextBoxWatermarkExtender ID="wmeGiftName"
                        TargetControlID="txtGiftName" WatermarkText="Gift Name"
                        WatermarkCssClass="watermark" runat="server"></cc1:TextBoxWatermarkExtender>
                </div>
                <br class="clear" />
                <div class="row">
                    <asp:TextBox ID="txtGiftMessage" Rows="5" Width="323" BorderStyle="None" 
                        Font-Names="Arial" TextMode="MultiLine"
                        Font-Size="116.7%" runat="server"></asp:TextBox>
                    <cc1:TextBoxWatermarkExtender ID="wmeGiftMessage"
                        TargetControlID="txtGiftMessage" WatermarkText="Gift Message"
                        WatermarkCssClass="watermark" runat="server"></cc1:TextBoxWatermarkExtender>
                </div>
                <br class="clear" />
                <div class="button-row">
                    <asp:ImageButton ID="imbShippingDetails" 
                        ImageUrl="/images/shopping-cart/ship-details-btn.png"
                        OnClick="ReturnToShipping"
                        ValidationGroup="shipping"
                        runat="server" />
                    <asp:ImageButton ID="imbPayDetails" ImageUrl="/images/shopping-cart/pay-details-btn.png"
                        ValidationGroup="pay"
                        runat="server" />
                </div>
                <br class="clear" />
            </asp:Panel>

Here is the CSS:

.row
{
    float:left;
    height:40px;
}

.button-row
{
    float:left;
    width:323px;
    text-align:right;
}

Any ideas how I can stop this?

Thanks.

Answer 1

It's laying out exactly as you told it to. The class you assign .row has a height property of 40px. Since you specified the height the container div is only 40 px high which is why your buttons appear on top of it. If you added a style="overflow: hidden" to the div holding the textarea you'd notice that most of that textarea disappeared. You'll either need to add a new style that overrides the height property or remove the class all together from that div.

When working with these kinds of layout issues it can be helpful to add a border or background-color property to the classes you're suspecting to help you visualize what's going on. In this case your multiline textbox is overflowing outside of the 40px div.