The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Absolute positioning and overflow

This might be one for Paul O'b

I've got a little problem which I have solved but wondered if there was a better approach. Unfortunately I can't post any code or a link at the moment as it's for a client but I'll try and explain the problem.

I've basically got a container <div> which has a few child elements which are floated.

On the parent <div> I've used overflow: hidden; to force it to contain it's children which all works fine as expected.

Now comes the tricky part. The design is quite complex with a couple of overlapping images which need to be separate due to the content management system the client is using so what I've deemed the easiest solution is to use relative positioning to place a background image in the top right corner of the parent div which will overlap the rest of the content.

To do this I've needed to add position: absolute; to the container which obviously takes it out of the document flow and causes it to no longer expand for it's children.

So, to get around this, I've introduced an extra <div> which does nothing more than position: absolute; but it has meant introducing an extra div.

Is there an easier or better solution that anyone can think of that would solve this problem or is this the best solution given the complex layout?

Thanks for any input or suggestions and sorry for not being able to provide a link or code although I could probably put together an example if it would help explain it better.

I personally never use relative positioning. I don't understand why you say you have needed to use absolute positioning on the container so that you can use relative positioning within. That's not how it works.

You can always nudge an element from it's original position without doing anything to the parent.

If you need to contain the region for absolute positioning then you give position: relative; ( or anything other than static ) to a parent element that you want to act as the boundary for the absolute positioning.

I've used relative positioning on occasion. Dave, would it be possible for you to recreate this as a plain wireframe with example images and placeholder background/foreground colors (I prefer pastels for this)?

Yes but I'm I'm still not sure where Dave was going with this and if the h3 is at the top of the column it could have simply been shifted with a negative margin and retained the flow without needing to compensate with padding to preserve the flow.

Yeah, I don't tend to use relative or absolute positioning for much to be honest so it's probably the one area that I should look a bit more at.

It was one of those situations where I was thinking that I'd have to use absolute positioning to get it to overlap the two columns and was kind of stuck in that mindset when putting it together that using relative and a negative margin didn't occur until you just suggested it. There may have been something else that was conflicting that though as this is just code that I put together off the top of my head and may not quite accurately reflect the code I was dealing with but it's answered my question and given me plenty of alternatives to work from.