nested <div> creates extra space

sstuber · May 2nd, 2008, 09:56 AM

I made a webform containing several <div> elements. For some reason I am getting a lot of extra empty space at the end of my 'outercontainer' <div>. Am I nesting these incorrectly? I think it may be related to how I am manipulating the 'top' property of the 'top banner', 'sitepathbox' and 'content' <divs> (they are set at -471px so that they stack next to the 'leftcol' <div>). Help please.

Code:

<div id="outercontainer" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px; padding-top: 5px; width: 768px; height: 514px; margin: auto auto; border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid;">

            <div id="leftcol" style="width: 100px; height: 471px; position: relative; top: auto; margin-right: 5px">
            <img alt="logo" src="logo.jpg" /><br />
            <br />
            <img src="images/button_1.jpg" alt="" /><br />
            <img src="images/button_2.jpg" alt="" /><br />
            <img src="images/button_3.jpg" alt="" /><br />
            <img src="images/button_4.jpg" alt="" /><br />
            <img src="images/button_5.jpg" alt="" /><br />
            <img src="images/button_6.jpg" alt="" /><br />
            <img src="images/button_7.jpg" alt="" />
            </div>


                <div id="topbanner" style="background-image: url(images/bg.gif); width: 623px; background-repeat: repeat-x;
                height: 54px; position:relative; left:143px; top: -471px">
                </div>

                <div id="sitepathbox" style="position: relative; left: 143px; width: 623px;  top: -471px; height: 23px;
                background-color: #f5f5dc">
                <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
                <asp:SiteMapPath ID="SiteMapPath1" runat="server" Font-Names="Arial" Font-Size="0.8em"
                PathSeparator=" : ">
                <PathSeparatorStyle Font-Bold="True" ForeColor="#507CD1" />
                <CurrentNodeStyle ForeColor="#333333" />
                <NodeStyle Font-Bold="True" ForeColor="#284E98" />
                <RootNodeStyle Font-Bold="True" ForeColor="#507CD1" />
                </asp:SiteMapPath>
                </div>

                <div id="content" style="position: relative; left: 143px; width: 623px; top: -471px; height: 394px; ">
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                </asp:ContentPlaceHolder>
                </div>
        </div>