vertically align absolutely positioned div elements

[Guybrush Threepwood]

On http://users.skynet.be/am036990/test.html I have 2 div elements
underneath each other. But when I lower the font size (in Firefox: <ctrl>+-),
the lowest box slides in front of the upper box. How can I avoid this?

 

[Mitja Trampus]

On http://users.skynet.be/am036990/test.html I have 2 div elements
underneath each other. But when I lower the font size (in Firefox: <ctrl>+-),
the lowest box slides in front of the upper box. How can I avoid this?

No idea why it does what it does, but the fix is easy: don't
use absolute positioning with #menu and #searchbox, but
rather on a new containing div#foo:
<div id="foo"> <-- absolutely postioned
<div id="menu">...</div>
<div id="searchbox>...</div> <-- add some margin-top
</div>

This is even better than the original solution because it
avoids the explicit top:18em on #searchbox, which would have
to be changed every time you change the contents of #menu.