#1
  1. Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2003
    Location
    Australia
    Posts
    18
    Rep Power
    0

    Copyright with CSS


    Hi,
    I'm having a bit of trouble :?

    I've got a title, content, footer design that is giving me pain. You see the title is a set height, that is fine, but the content isn't, it all depends on the page.

    Now the thing is I would like a bit of copyright text to sit right at the bottom of the page on every page, I can do this with:

    bottom: 0px;
    position: absolute;

    The only problem is if the content text gets too big (and it will) and flows down the page the footer stays right at the edge of the page, sitting in the middle of the new extended content, I've tried it without the position: absolute; and it works, but if the content is small it sits right at the edge of the content again in the middle of the page, its a damned if I do, damned if I don't.

    I'd rather I didn't have to give content a set height as I'm trying to cater to a wide range of resolutions and I don't like scroll bars showing up if they aren't needed.

    I'm not sure if I'm writing this correctly, is its truly incomprehensible I'm sorry :?
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2002
    Location
    Canberra, Australia
    Posts
    348
    Rep Power
    13
    can you paste your code?

    Are you using CSS positioning elsewhere on the pge?
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2002
    Location
    Seattle WA
    Posts
    863
    Rep Power
    14
    Basically, if you have long content like that, you need to create a series of containing blocks that all have absolute positions.

    So, you need to create a pseudo frameset by having a content block whose bottom is set to the position of the copyright container's top attribute:
    Code:
    #content {
      position: absolute;
      top: 0;
      bottom: 1em;
      left: 0;
      right: 0;
      overflow: auto;
    }
    #copyright {
      position: absolute;
      bottom: 0;
      height: 1em;
      left: 0;
      right: 0;
    }
  6. #4
  7. Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2003
    Location
    Australia
    Posts
    18
    Rep Power
    0
    Hi,
    My current code is:

    BODY {
    background:#FFFFFF;
    height:100%;
    margin:0px;
    width:100%;
    padding:0px;
    min-width:500px;
    }

    #title{
    background-image: url("../images/bgtop.jpg");
    background-repeat:repeat-x;
    width:100%;
    min-width:500px;
    height:150px;
    padding:0px;
    top:0px;
    }

    #title_menu{
    background:#FFFFFF;
    position: absolute;
    right:52px;
    top:90px;
    vertical-align: text-bottom;
    width:260px;
    }

    #title_right{
    position: absolute;
    right:0px;
    top:0px;
    width:52px;
    }

    #content{
    width:auto;
    padding:0px 10px 0px 10px;
    min-width:500px;
    }

    #footer{
    bottom:0px;
    position: absolute;
    }

    MJEggertson,
    I tried the code you posted but it didn't seam to want to work, the copyright bit still flowed over the content :?
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2002
    Location
    Canberra, Australia
    Posts
    348
    Rep Power
    13
    http://www.alistapart.com/stories/flexiblelayouts/

    I have used this story for a similar thing, Using Container DIVs and nesting DIVs inside with Relative and Absolute positioning.

    The story explains how to create a three column layout in CSS with a bottom area.

    The script mentioned in the article determines the size of the content div and then sets the bottom area to the bottom of that..

    Give it a try..

IMN logo majestic logo threadwatch logo seochat tools logo