SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    orange pips! orange pips!
    Join Date
    Oct 2001
    Location
    Its all about location
    Posts
    652
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry header/3 column layout woes

    I am trying for this type of layout:

    PHP Code:
    ------------------------------------
    |     |          
    HEADER      |     |
    |     |----------------------|     |
    |     |                      |     |
    |     |                      |     |
    |     |                      |     |
    |     |                      |     |
    |     |                      |     |
    |     |                      |     |
    |     |                      |     |
    |     |                      |     |
    |     |----------------------|     |
    |     |          
    FOOTER      |     |
    ------------------------------------ 
    So, the two columns on the right and left are about 15% wide, then there is the general content are in the middle which is 70% wide. In there, I want a header area and a footer area, between the 2 columns on the right and left. However, if the content in the middle does not span the entire length of the page so that the footer is at the bottom, I want the footer to be at the bottom of the users browser.

    So far I have this css:

    Code:
     
    body {background-color: #EFEFEF;}
    #header, #footer {
     text-align: center;
    }
    #header {
     height: 100px;
    }
    div.small {
    		width:10.2em;
    		position:absolute;
    		top:0;
    		font-size:80%;
    		padding-left:1%;
    		padding-right:1%;
    		margin-left:0;
    		margin-right:0;
    }
    #main {
    		margin-left:10.2em;
    		margin-right:10.2em;
    		padding-left:1em;
    		padding-right:1em;
    }
    #left {
    		left:0;
    }
    #right {
    		right:0;
    }
    And this html code:
    Code:
    <html>
     <head>
      <title>parrish.krayzieland.com v2</title>
      <link rel=stylesheet type='text/css' href="css/style.css">
      <script type='text/javascript' src="js/x.js"></script>
     </head>
     
     <body>
      <div id='header'>
       <img src="images/header.jpg" border='0'>
      </div>
      
      <div id='left' class='small'>
       left
      </div>
      
      <div id='main'>
       center
      </div>
      
      <div id='right' class='small'>
       right
      </div>
     </body>
    </html>
    I don't think I have enough to make this work. I'm not sure how to get the footer into this, and make sure its at the bottom of the screen if the content doesn't push it there.

    Please help?

  2. #2
    SitePoint Addict Fire59's Avatar
    Join Date
    Aug 2003
    Location
    mn
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    look at mine link

  3. #3
    orange pips! orange pips!
    Join Date
    Oct 2001
    Location
    Its all about location
    Posts
    652
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Close, but not quite what I'm looking for. I don't want the footer to expand across the left and right columns. I want the header, content and footer contained within the left and right columns, and the footer always at the bottom.

  4. #4
    SitePoint Addict Fire59's Avatar
    Join Date
    Aug 2003
    Location
    mn
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    look at it again. I think that's what you want. The header is not line up. Can someone else help.

  5. #5
    orange pips! orange pips!
    Join Date
    Oct 2001
    Location
    Its all about location
    Posts
    652
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Closer. Now I how do I get the yellow down to the bottom of the page?

  6. #6
    SitePoint Addict Fire59's Avatar
    Join Date
    Aug 2003
    Location
    mn
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    got it to look how you want, but doesn't render correctly in moz. look again.

  7. #7
    orange pips! orange pips!
    Join Date
    Oct 2001
    Location
    Its all about location
    Posts
    652
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In IE6 the footer doesn't go to the bottom of the page.

  8. #8
    Super Ninja Monkey Travis's Avatar
    Join Date
    Dec 2001
    Location
    Sioux City, Iowa
    Posts
    691
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Of course it doesn't, there is no good way to make it do so either. I suggest that you go back to tables if you just want to try and emulate them with CSS-P. However, try making the tables XHTML 1.0 Strict.
    Travis Watkins - Hyperactive Coder
    My Blog: Realist Anew
    Projects: Alacarte - Gnome Menu Editor

  9. #9
    orange pips! orange pips!
    Join Date
    Oct 2001
    Location
    Its all about location
    Posts
    652
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In retrospect, the solution that Fire59 gave me is the best. It's css savy and doesn't use tables. That was my point in this, not to use tables. I was just seeing if there was a way to do it with only css.

    Travis, what do you mean by XHTML 1.0 Strict?

  10. #10
    Super Ninja Monkey Travis's Avatar
    Join Date
    Dec 2001
    Location
    Sioux City, Iowa
    Posts
    691
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You mean you use CSS and don't validate? http://validator.w3.org
    Travis Watkins - Hyperactive Coder
    My Blog: Realist Anew
    Projects: Alacarte - Gnome Menu Editor

  11. #11
    orange pips! orange pips!
    Join Date
    Oct 2001
    Location
    Its all about location
    Posts
    652
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I do 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
  •