positioning of divs

[brews]

Have been trying to place a div on top of another and seem to have run into a wall.

The page has a header with a pix under the header and then three columns under the pix. The pix has another div over layed float: right. Whenever I try to move the div to over lay the pix, it involves using position: relative; top: -150px;. Which leads to some more negative positioning of the other three columns. Also messes up the length of the page which places a big gap between the bottom of the three columns and the footer.

Here is what I have so far:

http://tricksterfilms.com/test/about.htm

What needs to be done is to move the yellow square on top of the flag/man-holding-child allowing Location Shots to move up in line with the other two columns.

Thanks.

 

[audiopro]

Why not put use your main image as a div background image and then place the yellow square in the top div using padding. That way you do not need to overlap divs .

Keith

http://www.studiosoft.co.uk

 

[grtammi]

If you have control over the source, put the coyote div inside the flag div like such:

<div id="flag">
  <img src="images/about_flag.gif" alt="flag" />
  <div id="coyote"></div><!--end coyote-->
</div><!--end flag-->

* this is along the lines of what audiopro mentioned above, btw, except I left the image in the page *

Then your CSS for positioning looks like:

#flag { position:relative; }
#coyote { position:absolute; right:0; top:0; }

Apply your other styles as required.

Greg