The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Difficulty Aligning Layered Divs

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #169380

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

    Here is a link to the current status of the site:

    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.


    I want the pink background to role overtop of the banner image as the content scrolls up; similar to what is outlined here:


    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?

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.