View Full Version : How would you code this kind of footer?

Dec 16th, 2010, 09:49 AM
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:

http://img692.imageshack.us/img692/1061/sheetoverlap.th.jpg (http://img692.imageshack.us/i/sheetoverlap.jpg/)

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

Dec 16th, 2010, 02:03 PM
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.

Dec 16th, 2010, 02:40 PM
Perhaps with a negative margin, eg:

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


#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}

Dec 16th, 2010, 03:10 PM
paolo1, unfortunately the content height will vary and can't be fixed.

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

Dec 16th, 2010, 09:48 PM
Geez, I try to help out on here but you guys are too fast. :p Good job SB65.