Search code examples
htmlcsswordpressfooter

How to use overlapping floating div's?

I'm making a Wordpress theme with PHP, HTML and CSS. My footer automatically floats down under the white content block when more text is added.

Now, I want to add another image that has to overlap the footer and also the white content block. But... I want it to float down when more text is added, like the footer does.

Here's the link to make my question clear: website

So, I want the image with the papers and the pencil to overlap both of the div's footer and the white content block. And it also needs to float down when more text is added.

oh, and I'm also having an issue with the outer edges of my footer, as you can see there is space, but the footer has to be full screen at the width.

-Thanks

Solution

  • Since the footer already aligns and "floats" as the content changes, the simplest solution would be to take advantage of this and place it inside the footer. From there you can position it partially outside with absolute positioning on the illustration and relative positioning on the footer.

    Here's a proof of concept: http://jsfiddle.net/eliland/Qp76P/