Forums

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

Home Forums CSS 960 grid footer problem

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #23703
    ebowers
    Member

    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>

    #51885
    ebowers
    Member

    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.

    #51898

    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

    #51937
    ebowers
    Member

    dude your awesome, thanks so much.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.