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.