[Techtalk] CSS absolute positioning and overflow:hidden

[Akkana Peck]

Oh CSS gurus: I'm working on a Javascript project involving
animation, but I'm running into a snag involving CSS and absolute
positioning.

The problem is that I want to position some images inside a
box on a page.  Here's my test page:
    http://shallowsky.com/bugs/absolute/

I have a containing div (indicated by the inset border) which
contains a little text plus two flower images. The flower images
are style="position: absolute; left: 150px; top: 10px;" for the
first flower, and the same with "left: 450px" for the second.

All the references I've found say that absolute coordinates
are relative to the containing element, so that "top: 10px"
should put the top of the flowers inside the div. But instead
I'm seeing them placed relative to the whole page.

It's almost like the images aren't really inside the div, but
Firefox' DOM Inspector says they are. What am I missing?

Also, I'd like to clip the images so nothing is visible outside
the div. Apparently "overflow: hidden" on the containing div is
intended to do that; but obviously it doesn't in Firefox, and
apparently most browsers don't support it very well. Is there a
better way to clip content to the size of the containing element?

-- 
    ...Akkana
    "Beginning GIMP: From Novice to Professional": http://gimpbook.com