Positioning problem

Fanny Cradock · 20-04-2011 11:41am #1

I should know how to do this ...

Anyway, I'm doing up a landing page for Facebook and I'm having a little trouble correctly positioning images.

The page consists of a main background image (#main) and then 4 separate clickable images (#children, #events, #emergency# and #website) that rest on top of this. I initially had all these images (excluding #main) set to position:relative; top:-Xpx; however, this wasn't rendering correctly across certain browsers.

In an attempt to address this problem I've changed things slightly. Gone is the individual positioning and in comes a #pics div to wrap all these 4 divs (#children, #events, etc...). I had hoped that positioning this relative to #main would solve my problems. However, what I get is the #main (902px) being shunted up by #pics by 720px.

In conclusion, what I want is for #main to remain fixed and for #pics (and all the sub-divs) to move relative to #main.

Help would be appreciated

<html> 
<head> 
<style type="text/css"> 
#main{height:902px;width:520px;} 
#pics{height:784px; position:relative; top:-720px;} 
#children{height:227px; width:294px} 
#event{height:226px; width:294px;} 
#emergency{height:295px; width:234px;} 
#website{height:36px; width:520px;} 
img{border:none;} 
</style> 
</head> 

<body> 
<div id="main"> 
<div id="pics"><img src="#" /> 
<div id="children"> <a href="#" target="_blank"><img src="#" /></a> 
</div> 
<div id="event"> <a href="#" target="_blank"><img src="#" /></a> 
</div> 
<div id="emergency"> <a href="#" target="_blank"><img src="#" /></a>
</div> 
<div id="website"> <a href="#" target="_blank"><img src="#" /></a> 
</div> 
</div> 
</div> 
</body> 
</html>

cormee · 20-04-2011 12:31pm

Do you have an example live?

Fanny Cradock · 20-04-2011 12:40pm

I'm afraid not. It wont be live until I get it right.

Positioning problem

Comments