How would you code this kind of footer?

[sasho90]

Hi
I'm trying to build the code from a design made in Photoshop. I am wondering how to do the overlapping content div over the footer:



If this info is of any help - I'm designing in 960 width. Any suggestions?

[paolo1]

Just aplly this black backround image to body or wrapper div. Then make content div exact height to overlap this image as you like. And then place footer div right after content div with text only without any background.

[SB65]

Perhaps with a negative margin, eg:

<div id="wrap">
<div id="top"></div>
<div id="bottom"></div>
</div>

with:

*{margin:0;padding:0}
#wrap{background-color:#333333}
#top{width:900px;background-color:#CCCCCC;border:10px solid white;margin:0 auto;height:300px;position:relative;z-index:2}
#bottom{background-color:#454545;border-top:2px solid white;height:150px;margin-top:-50px;padding-top:50px;position:relative;z-index:1}

[sasho90]

paolo1, unfortunately the content height will vary and can't be fixed.

SB65, I owe you a beer! It works flawlessly!

[cineweekly.com]

Geez, I try to help out on here but you guys are too fast. Good job SB65.