Difficulty Aligning Layered Divs

[Historical Forums User]

Hello! I need some help finessing a new layout I’m working on.

Here is a link to the current status of the site:
http://sometimesyoubreakaclarinet.com/

What you’ll see is a large pink area behind the gray content area, it is roughly a third down the page. For some reason, it is only forming to 100% of the height/width of the browser when I actually want it to match the height of the content. How do I get the height to fill down to fit to the content, in the same way the gray content area is already doing?

Secondly, I want this pink area to begin at the end of the background banner image at the top rather than where it is now. How do I achieve this? Do I need to change the position from relative to something else?

I’ve include what I think is the relevant CSS code below, possibly I’ve left something important out but you should be able to locate the CSS file on the link above if necessary.

#menu            { width: 100%; height: 32px; margin: auto; padding: 6px auto 0; top:0px; z-index: 10;
                  position: fixed; text-decoration: none; background: rgba(44,44,44,0.95); }
#photograph        { width: 100%; margin: 0 auto; background: #8a2dc7 url('img/header-2014-apr-1200.jpg') fixed center top no-repeat;
                  background-position: center top; background-size: 100%; min-height: 250px; height: 250px; top:0px; 
                  position: fixed; }    
#sitetitle     { width: 100%; height: auto; margin: 0 auto; padding: 25px 0 0 0; background: transparent; position: fixed; }   #deck           { width: 100%; height: 100%; min-height: 100%; margin: 0 auto; padding: 0; position: relative; 
                  background: transparent; z-index: 4; }
#card          { width: 800px; height: auto; margin: 170px auto 0; padding: 10px 18px; 
                  text-decoration: none; background: #2c2c2c; }
#curtain       { width: 100%; height: auto; min-height: 100%; margin: 220px auto 0; padding: 0; position: relative; 
                  background: #f12fde; z-index: 2; }

Hopefully someone can help me figure this out. I’m self taught, mostly through trial-and-error with the assistance of various online tutorials including the w3schools website. Often I’m able to figure out what I’m trying to achieve but sometimes I feel like I hit a brick wall.

[Historical Forums User]

I want the pink background to role overtop of the banner image as the content scrolls up; similar to what is outlined here:
http://line25.com/tutorials/how-to-create-a-simple-collapsing-header-effect

[Historical Forums User]

Outstanding! I hadn’t thought to use a negative value for the top in #card. I too prefer efficiency, I also like minimalism so one less div is all the better. Thank you so much!

Now, is it possible to add a sticky footer to this?

[Author]

Posts