SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Thread: Footer Issues?

  1. #1
    SitePoint Enthusiast Insane_Edna's Avatar
    Join Date
    Oct 2003
    Location
    Alberta, Canada
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Footer Issues?

    Hi,
    Been looking at this for to long and could really use the help. I am converting an existing table layout over to css and am having issues with the footer. I have a 200px wide left column, the main content is to the left of that, a top divider bar and then a footer bar. It should be a liquid layout so that it stretches and shrinks with the browser window. The footer is supposed to sit at the bottom of the left column and stretch 100% across the screen to match the top divider bar. The content should be in between the top and bottom divider bars to the left the left column and be 80% of the remaining screen.
    My problem is the content does not work properly using percents and my footer bar does not stretch across the screen as it should. I am sure it is a simple fix but can not see what it is right now and any help would be appreciated. Here is my code:

    The CSS

    Code:
    * {
      margin: 0;
      padding: 0;
      }
    
    body {
      font-family: arial, helvetica, sans-serif;
      }
    
    a img {
      border: none;
      }
    
    #leftcol {
      position: absolute;
      top: 0;
      left: 0;
      float: left;
      width: 220px;
      height: auto;
      background-color: #000000;
      z-index: 1;
      }
      
    #contentwrapper {
      margin-left: 250px;
      margin-top: 150px;
      border: 1px solid #000000;
      position: relative;
      width: 80%;
      height: 550px;
      }
      
    #top-divider {
      position: relative;
      margin-top: 100px;
      width: auto;
      height: 40px;
      background-image:url(images/divider.jpg);
      background-repeat:repeat-x;
      z-index: 10;
      }
      
    #bottom-divider {
      width: 100%;
      height: 40px;
      background-image:url(images/divider.jpg);
      background-repeat:repeat-x;
      position:relative;
      z-index: 10;
     clear: both;
      }
    The HTML

    Code:
    <body>
    
      <div id="top-divider"></div>
         <div id="leftcol">
            <div id="contentwrapper"></div><div id="bottom-divider"></div>
      </div> 
    
    </body>
    Thanks for any help you can give.

  2. #2
    SitePoint Enthusiast Insane_Edna's Avatar
    Join Date
    Oct 2003
    Location
    Alberta, Canada
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the quick reply and for helping to solve my problem.Everything works great now.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •