vertically aligned image overlaps menu

browser resizing causes overlaps

[nemof]

I have a page that is split thus:

<DIV id="header">
<IMG src="images/logo.png">
</DIV>
<DIV id="menu">
<IMG SRC="images/menu_01.png">
<IMG SRC="images/menu_02.png">
<IMG SRC="images/menu_03.png">
<IMG SRC="images/menu_04.png">
</DIV>
<DIV id="main">
<IMG id="placeholder" src="images/placeholder.jpg">
</DIV>
<DIV id="footer">blah blah blah</DIV>

Basically the center image (placeholder). has this css:

#placeholder {
position: relative;
height: 310px;
width: 615px;
top: 50%;
margin-top: -155px;
margin-left: auto;
margin-right: auto;
}

and is inside the #main DIV with this css:

#main {
height: 70%;
margin: 0px;
padding: 0px;
}

The #header is 110px high and #menu 30px. At the moment when I resize the browser the placeholder image gets pushed over the menu buttons, covering them. Not good for small browsers.

How can i solve this?

[Sekka]

Don't quote me, but the "top: 50%;" on a relatively placed image would make it move up a distance relative to 50% the page height "I think". Either that or the "margin-top: -155px;" part is pushing it up.

Why are they there by the way?

[londrum]

you should try and keep all your positioning measurements the same, because then they will still stay relative to each other when the browser is resized.

so if you use percentages for one, then use percentages for them all.
or use pixels for them all.

[nemof]

I thought it made moved it relative to the DIV it was contained within? What that part does is vertically center the image within the containing DIV. It works by pushing the image down 50% of the length of the DIV and then pushing it up 155 pixels, half of the images height by using a negative margin. This is a very effective way of vertically centering content, but unfortunately it spills over to other DIVS, obscuring other stuff.

[londrum]

but what if you resize the height of the page from 600px to 768px?
it will still move down 50% each time, but 50% will be a different amount of pixels each time. and then when it moves back up 155px, it won't have gone the same distance.

if your header remains 110px high each time, then it will overlap.

[nemof]

ah i see. but then what happens if I have two images in two different divs? depending on their stacking order one will end up overlapping another if the screen gets small enough, like one sheet of paper being moved over another.

Is there a way to force it to scroll rather than overlap? I mean that rather than one image overlapping another a scroll grows instead?

[londrum]

if the screen gets so small that the width is less than the image, then it's going to bugger up anyway. and there's not much you can do about that.

but if you 'position:relative' everything, and do away with your minus margins then it shouldn't overlap. if it does, then just put a 'clear:both' in the CSS on the one that is overlapping. that will make it drop below the one behind it. (but only if you remove the minus margins!)