How to create three overlapping layers without using "position" and "margins"

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开发者_C百科 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-940x60.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.

This cannot be done without invoking either position:absolute to take the element out of flow and deal with it directly or using negative margins to artifically push the content around within flow. pos:abs is the correct solution (well a background image is in fact the correct solution but you'd have to have a fixed size) and your only chance here is to use it and repair the consequences.

This especially cannot be done with table elements which would take so much breaking as to become unreliable - it may be on your todo list to remove tables, but if you have a specific problem you need to fix the specific instance now.

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