Question

I’ve tried suggestions found here (either using negative margin-bottom or using position: aboslute) for overlaying a div over another div, and it has worked fine in other cases. But for some reasons it won’t work now.

Here’s my html:

       <div id="header" class="lightgradient">

            <div id="headerContent" class="container">

                <div id="logo" class="span-6">

                    <a href="/">

                        <img src="/images/logo.png" width="230" height="62" />

                    </a>

                </div>

                <div id="menucontainer" class="span-14"><ul id="menu"><li>

<a href='/Services/Index'>TJ&#196;NSTER</a></li>

<li>

<a href='/About/References'>KUNDER</a></li>

<li>

<a href='/About'>OM OSS</a></li>

<li>

<a href='/About/Contact'>KONTAKT</a></li>

</ul></div>

                <div id="logindisplay" class="span-2">

                        <a href="/Account/LogOn">Logga in</a>



                </div>

            </div>

        </div>



    <div class="banner">

        <div class="container white">

            <div class="span-12">
[etc...]

I want the logo to jut down over the “banner”.

I tried this e.g.:

#logo
{
    float: left;
    height: 70px;
    padding: 10px 10px 0px 10px;
    position: relative;
    margin-bottom: -40px;
    z-index: 40;
}

But that won’t work. It moves the div and logo image fine, but the image is hidden at the bottom by the banner, even though I set a high z-index, and also I get a scrollbar inside the div that holds the logo…

How do I make the image lay on top of the banner, and how do I get rid of the scrollbar?

EDIT:

Here’s the banner css too:

.banner
{
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#70b8ea', endColorstr='#2c6dc3'); 
    background: -webkit-gradient(linear, left top, left bottom, from(#70b8ea), to(#2c6dc3)); 
    background: -moz-linear-gradient(top,  #70b8ea,  #2c6dc3);
    border-bottom:2px solid #fff;
    border-top: 1px solid white;
    padding: 20px;
}

Answer 1

Your markup won’t allow the margin-bottom trick to work since your #logo div is nested in a different set of elements.

You’ll have to position the logo absolutely and place it relative to a parent element that wraps both the #logo div and the .banner div.

http://jsfiddle.net/DOSBeats/NXgq6/

Here is an example using position:absolute. In the example I didn’t use position:relative on a parent element, but if you are using a grid system I would check to make sure the main .row or .container-(12||16) has the position:relative property set.

This will ensure any left:15px; top:25px; will be centered with the rest of the content.

EDIT:

After reviewing your code here is how you need to update your CSS/HTML.

1. Remove all references to position:relative from #header and #headerContent
2. After your #wrap div you’ll need to add another <div class="container"> and close it off just before the </div> that closes the #wrap element.
3. Change overflow:auto to overflow:hidden on your #headerContent element to get rid of the scroll bars to the far right.