Div tag an JQuery UI

I am working on a wi开发者_C百科dget control. The widget is loaded dynamically into a widget container. The widget container contains a div which holds the widget, this is known as the widget area. The widget container is made to be draggable and resizable using JQuery UI.

The problem I am having is that the bottom-margin of the widget area does not seem to work or perhaps I am misuderstanding how margins work. The left top and right margins work fine, I have them set at 20px and so the widget area is 20px from the left top and right of the widget container. The bottom margin is also 20px but the distance between the bottom of the widget area is much more than 20px from the bottom of the widget container. I have tried it in firefox and the same issue occurs.

When I resize the widget container the widget area's left also resizes because of the margins however the bottom of the widget are doesn't resize at all because bottom-margin doesn't seem to be working.

here is my widget container and css.

<asp:Panel ID="Panel1" CssClass="widgetcontainer" runat="server" Height="500px" BorderStyle="Solid" BorderWidth="1px" Width="485px" BackColor="White">
    <asp:Panel ID="Panel2" CssClass="widgetcontainerheader" runat="server">
        <asp:Label ID="Label2" runat="server" Text="Gadget header"></asp:Label>
    </asp:Panel>

    <asp:Panel ID="WidgetBodyPanel" CssClass="widgetarea" runat="Server"    BorderStyle="Solid">
        <p>
            some text
        </p>
    </asp:Panel>

</asp:Panel>

div.widgetcontainerheader
{
    background-color:#CCFF99;

    border-bottom-style:solid;
    border-bottom-width:thin;
    border-bottom-color:#D2D2D2;

    position: relative;
    width:100%;
    height:20px;
}

.widgetarea
{
    position:relative;

    margin-left:20px;
    margin-top:20px;
    margin-right:20px;
    margin-bottom:20px;

}

Could someone please advise why the bottom-margin does not work?

Thank you

You have the height of the widgetcontainer set to 500px.

I would say that widgetarea does have a margin-bottom of 20px but that it appears larger than that because the widget area has no height. Perhaps set height: 100%.

.widgetarea
{
  margin: 20px;
  height: 100%;
}

Btw, well worth installing http://getfirebug.com/ for debugging these annoying ui issues.