Overlapping divs gives a lot of unwanted space

Question

I have a situation where I have two elements, which are as follows in the bottom of this post.

I want my FrontPageMenu to overlap, so it is on overlapping my map, so it works as a menu. You can see it working at: http://mcoroklo.dk/ .

To make this work, I've used position:relative; top:-550px; , BUT, this gives 550px of white space below my image ;-)

Basically I want to remove this white space, while everything works.

One solution could be to position:relative; top:550px; on the rest of the content, but I don't even want to comment on how stupid that is ;-)

Hope you guys can laugh at this and say "put in this property!".

Full map - a kind of image map using CSS:

    <dl id="fullMap">
    <dd>

        <a id="bamselandMap" href="Bamseland.aspx" title="Bamser"></a>        
    </dd>    
    <dd>
        <a id="andedammenMap" href="Badeaender.aspx" title="Badeænder"></a>
    </dd>
<dd>
        <a id="boblerMap" href="Saebebobler.aspx" title="Sæbebobler"></a>
    </dd>

</dl>

FrontPage menu div. In HTML it is like this:

<div class="FrontPageMenu">


<h3 style="color:white;">Legetøj</h3>

<hr />
    <span style="font-weight:bold; font-family:Arial; font-size:11pt; "><a id="ContentPlaceHolder1_ContentPlaceHolder1_ProductCategoryList1_CategoryRepeater_ParentCategoryName_0" title="Besøg Badeænder universet ved at klikke her" href="legetoej/badeaender" style="color:White;">Badeænder</a></span>

    <br />



            - <span style="font-family:Arial; font-size:11pt;" ><a id="ContentPlaceHolder1_ContentPlaceHolder1_ProductCategoryList1_CategoryRepeater_CategoryChildrenRepeater_0_ChildrenLink_0" title="Besøg Designer badeænder universet ved at klikke her" href="legetoej/badeaender/designer-badeaender" style="color:DarkGray;">Designer badeænder</a></span>



            <br /><br />



            - <span style="font-family:Arial; font-size:11pt;" ><a id="ContentPlaceHolder1_ContentPlaceHolder1_ProductCategoryList1_CategoryRepeater_CategoryChildrenRepeater_0_ChildrenLink_1" title="Besøg Store badeænder universet ved at klikke her" href="legetoej/badeaender/store-badeaender" style="color:DarkGray;">Store badeænder</a></span>





    <br /><br /><br />



    <span style="font-weight:bold; font-family:Arial; font-size:11pt; "><a id="ContentPlaceHolder1_ContentPlaceHolder1_ProductCategoryList1_CategoryRepeater_ParentCategoryName_1" title="Besøg Bamser universet ved at klikke her" href="legetoej/bamser" style="color:White;">Bamser</a></span>

    <br />



            - <span style="font-family:Arial; font-size:11pt;" ><a id="ContentPlaceHolder1_ContentPlaceHolder1_ProductCategoryList1_CategoryRepeater_CategoryChildrenRepeater_1_ChildrenLink_0" title="Besøg Mikroovns bamser universet ved at klikke her" href="legetoej/bamser/mikroovns-bamser" style="color:DarkGray;">Mikroovns bamser</a></span>



            <br /><br />



            - <span style="font-family:Arial; font-size:11pt;" ><a id="ContentPlaceHolder1_ContentPlaceHolder1_ProductCategoryList1_CategoryRepeater_CategoryChildrenRepeater_1_ChildrenLink_1" title="Besøg Musik bamser universet ved at klikke her" href="legetoej/bamser/musik-bamser" style="color:DarkGray;">Musik bamser</a></span>





    <br /><br /><br />



    <span style="font-weight:bold; font-family:Arial; font-size:11pt; "><a id="ContentPlaceHolder1_ContentPlaceHolder1_ProductCategoryList1_CategoryRepeater_ParentCategoryName_2" title="Besøg Sæbeboble udstyr universet ved at klikke her" href="legetoej/saebeboble-udstyr" style="color:White;">Sæbeboble udstyr</a></span>

    <br />



            - <span style="font-family:Arial; font-size:11pt;" ><a id="ContentPlaceHolder1_ContentPlaceHolder1_ProductCategoryList1_CategoryRepeater_CategoryChildrenRepeater_2_ChildrenLink_0" title="Besøg Sæbeboble pinde universet ved at klikke her" href="legetoej/saebeboble-udstyr/saebeboble-pinde" style="color:DarkGray;">Sæbeboble pinde</a></span>



            <br /><br />



            - <span style="font-family:Arial; font-size:11pt;" ><a id="ContentPlaceHolder1_ContentPlaceHolder1_ProductCategoryList1_CategoryRepeater_CategoryChildrenRepeater_2_ChildrenLink_1" title="Besøg Sæbeboble vand universet ved at klikke her" href="legetoej/saebeboble-udstyr/saebeboble-vand" style="color:DarkGray;">Sæbeboble vand</a></span>

FrontPage menu CSS class:

.FrontPageMenu
{ 
    position:relative;
    top:-550px;
    background-color:Gray;
    padding:10px;
    width:200px;
    background:url('http://www.mulius.com/Media/Site/FrontPageMenuBackground.png') repeat scroll 0 0 transparent;
    min-height:400px;

}

Answer 1

Make the map's containing element, position: relative; and make the map position: absolute;. Then, instead of using top: -550px, use left: 20px; top: 20px;. In the demo CSS I used !important to override your base stylesheet. You won't need that in your classes. Making the containing element's position relative makes the child element's absolute positioning related to that (not the page).

Using negative positions and margins to correct the difference is difficult to understand and debug when you (or someone else) looks at your code later on. Using floats can lead to layout issues elsewhere on the page and is not as intuitive. What you're really saying is, "I want this menu to be in the top left corner of my map". Since the map and the menu are siblings, that's absolute positioning.

Demo: http://jsfiddle.net/ThinkingStiff/M6Jc9/

.NoColumnContent {
    position: relative;    
}

.FrontPageMenu {
    position: absolute !important;
    top: 20px !important;
    left: 20px;
}

Answer 2

I would recommend trying with div with float and margins and padding, and not using relative positions. But i feel your pain....

Answer 3

Add margin-bottom: -500px; to the class FrontPageMenu.

You should know that when an element has position: relative, it will still occupy the space it would normally have if it wasn't moved. In this case you can solve this by using a negative margin.