Grow your CSS skills. Land your dream job.

960 grid footer problem

  • # December 4, 2008 at 5:51 pm

    Hi,
    This is my first time posting on this forum. I am kind of a novice at web design still. I am using the 960 grid for the first time, and I have run into a problem with putting a footer outside of the container so I can have a 100% width footer. The footer always ends up being on the top of the page overlapping the container div. I have changed the positioning to relative, and changed the container to relative, I have changed the footer to display:block, I am out of ideas. :o

    //this is the container attributes.
    .container_12,
    .container_16 {
    margin-left: auto;
    margin-right: auto;
    width: 960px;
    }

    //these are the footer attributes, they may look sloppy, but I just started adding things to it when it wouldn’t work the first few times.
    .footercontain {
    position:relative;
    bottom:0;
    width:100%;
    min-width:1002px;
    min-height:200px;
    height:auto !important;
    height:200px;
    background-color: #000000;
    margin:0px;
    display: block;
    }
    .container12 footbox {
    margin-left: auto;
    margin-right: auto;
    width: 960px;
    position: relative;
    min-height:200px;
    height:auto !important;
    height:200px;
    background-color: #000000;
    margin:0px;
    background-image: url(../images/opacity.png);
    background-repeat: repeat-x;
    position: relative;
    }

    //html

    //this is all outside of the container div
    <div class="footercontain">
    <div class="container12">
    <div class="footerbox"></div>
    </div>
    </div>

    Rob
    # December 4, 2008 at 6:17 pm

    hey :)

    you got a link to it live? :D

    # December 4, 2008 at 8:33 pm

    no, im sorry its not live. I am basically trying to build a template for myself. I could up a compressed file if you want to look at that, its alot of code if your up for it.

    # December 5, 2008 at 1:20 am

    First off, in your example:
    .container12 footbox {
    doesn’t reference anything. You’ll need to change it to
    .container12 .footerbox {
    to make a reference.

    You’ve got a lot of extra css (even html, i.e., <div class="container12">) going on. I’ve composed a mockup direct from the 960 grid site and added your code. Should render correctly in everything. It should give you what you’re looking for.
    http://cse.taylor.edu/~screasey/stuff/ebowers.html

    # December 5, 2008 at 10:57 am

    dude your awesome, thanks so much.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".