Question

I’ve gotten myself into trouble. This ms my markup:

<div class="header_wrap">
    <div class="header_row0"><img src="header-940x60.gif"></div>
    <table class="header_row1">
        <tbody>
            <tr>
                <td><a href="/">Home</a></td>
                <td><a id="menuTrigger" href="#">More</a>
                    <ul id="menuContent" class="easymenu">
                        <li><a href="/link1.html">Link 1</a></li>
                        <li><a href="/link2.html">Link 2</a></li>
                    </ul></td>
            </tr>
        </tbody>
    </table>
    <table class="header_row2">
        <tbody>
            <tr>
                <td><a href="/link3.html">Link 3</a></td>
                <td><a href="/link3.html">Link 4</a></td>
            </tr>
        </tbody>
    </table>
</div>

To summarize, there are three items inside header_wrap:

1. header_row0
2. header_row1
3. header_row2

My objective is to position the header-940×60.gif image such that it appears as a background behind header_row1 and header_row2. But here is what I CANNOT do:

1. I cannot place the header.gif in the background. The image’s height may vary and I therefore must use header.gif inside an <img> tag without specifying dimensions. Besides I’ll need alt tags for SEO sometime in the future.
2. I cannot use position: relative and position: absolute because the #menuContent is position: absolute. It needs to be positioned w.r.t. the page, using relative positioning on any of its container just srcews every thing up.
3. The height of the image is not known so I cannot use negative margins.

Please advice best way to achieve the following result without relative positioning:

PS: In the screenshot you’ll notice the the popup menu is not aligned with the left side of its trigger. This is the main problem.

This jsFiddle link contains a skinned down version of the markup.

Answer 1

I used floats to achieve the overlapping effect. The first div was floated and then width: 0 so that it does not occupy any space but still show the content (add overflow: visible if necessary). Since the div does not occupy any space the two tables (or divs if you choose) will appear over the image. A clearing div makes sure all remaining content appears below the background image div.

Demo on jsFiddle