Quick Question. I'm trying to put together a simple header bar with a gif at the left and right side to produced rounded edges. The problem lies when positioning the right gif. I have the bar itself wrapped in a DIV, and within that, the right image in a SPAN. I thought that using absolute positioning that setting the right value to zero would make the image butt up against the right edge of the containing DIV, but instead it positions itself according to the screen. I've tried both absolute and relative pos. and nothing works. Am I wrong in my belief that CSSP is relative to the containing block? is a DIV not a containing block? Oh, and also the div's width has been set, so it's not a case of the containing DIV expanding all the way across the screen. Any ideas?
Absolute Positioning is relevant to the parent. The parent is defined as the nearest ancestor that has a value for the property position other than static (default). If there is none then the parent is deemed to be the html element (body outside of all margins).
Therefore to position inside an element the outer element must either be position:relative or position absolute. The usual way to do it is to use position:relative (without co-ordinates) and this will have no effect on the surrounding layout and keep the element in the flow of the document.
This will place the inner element at 0,0 in the outer container (i.e. the top left).
<div class="inner">Inner content</div>
Hope that helps.