Forum Moderators: not2easy
I have a background image (which is an swf) and simply need to create two div's in which to put php tags into to load dynamic content. The background image needs to be centered (it is 780 wide) while one div needs to be against the left of the background towards the bottom and the other div against the right of the background towards the top.
I have tried but it's just becoming a mess and is completely different in different browsers. Any help would be a lifesaver!
As far as I can understand your problem, something like this might do it:
<div id="wrapper">
<div id="box1"></div>
<div id="box2"></div>
</div>#wrapper {
position: relative;
background: url(my_image.png) no-repeat 50% 50%;
width: 780px;
height: 780px;
}
#box1 {
position: absolute;
width: 200px;
bottom: 10px;
left: 10px;
}
#box2 {
position: absolute;
width: 200px;
top: 10px;
right: 10px;
}Absolute positioning will take it's coordinates from the nearest positioned parent (in this case #wrapper) so we can align them how you want. The width:200px is arbitrary but you can tweak this.
margin: 0 auto;to your #wrapper selector then that should center the wrapper in the middle of the screen.
Without it dilby the boxes would take their position from #wrapper's parent instead, most likely <body> in your case.
So currently, bottom left and top right are of #wrapper, but without the relative position, that would be bottom left and top right of <body> (the whole screen) instead.
I think that's right, I'm not an expert myself, can you confirm that Robin?
Personally I think it should always go to parent, and you have to add something extra if you want it going with respect to something else.
DIV { position: relative; } Won't affect the normal flow but will mean any position is done in respect to parent.
