Forum Moderators: not2easy
I have received some helpful advice, but what I need to know regarding "my" particular setup is something that I haven't been able to "read" about, so I was hoping I could post my current layout and problem.
I am using a elastic layout with 1 col, 3 rows (header, content, footer). The container holding all 3 rows (divs), is 44ems wide and centered at the top of the browser window.
What I would like is to have a image (355px x 370px) positioned underneith the bottom left corner of the main container. It won't be completely underneith so you can't see it, but the image would stick out to the left and be lower than the container.
PROBLEMS:
What I have found is that positioning will be based on screen resolution - so even if I line up the image in the right spot for my resolution (e.g. 1280x1024) if viewed on a screen with (e.g. 1600x1200) the image is pulled further down and to the left (obviously based on the browswer window positioning of that resolutions)
So how do I make sure the image stays underneith the corner of the container no matter resolution?
The other problem is that no matter what positioning I put all the div's (relative : absolute) or what I put the image DIV that I am trying to position (relative : absolute) - when using the Z-index to place the image below (image = z-index: 1) and all other divs (z-index:2) the image is always on top of the container divs.
NOTE: the image div is inside the container as well.
Any insight and advice on how to make the image stay with the container and why the image insist on staying on top, would be greatly appreciated.
Have you tried to float the div with the image to the left, and making it the last element in the container? Then use position: relative for the image to move the image left/right up/down.
Make sure the elements that need to have a z-index have a position: (I learned recently: position relative without top/left/right adjustments does not affect layout).
J
