SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Member
    Join Date
    Mar 2003
    Location
    Boise
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile Creating three column layout with CSS

    Hello,
    Can someone please help me figure out how to code a simple three column based layout with CSS? I've been attempting to do this for a couple days now (yes I'm new to most of this, but not stupid), and I have only been able to make small adjustments to my layout.

    This is what I'm looking for.

    Code:
    ______________
    |                          |
    |                          |
    |---------------------|
    |        |                 |
    |        |                 |
    |        |                 |
    |        |                 |
    -----------------------
    I would like to have the whole thing 760px wide, have the header be 100px tall, and the left navigation area to be 150px wide.
    If anyone can help me with this it would be greatly appreciated.

    Jason Baker
    www.potatopimps.com

  2. #2
    SitePoint Wizard silver trophy TheOriginalH's Avatar
    Join Date
    Aug 2000
    Location
    Thailand
    Posts
    4,810
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I've added "code" tags to your post so it looks a little better .

    Could you show us what you've got so far Jason? It would be far better to show you where you've gone wrong than just "give" a solution....
    ~The Artist Latterly Known as Crazy Hamster~
    922ee590a26bd62eb9b33cf2877a00df
    Currently delving into Django, GIT & CentOS

  3. #3
    SitePoint Wizard silver trophy TheOriginalH's Avatar
    Join Date
    Aug 2000
    Location
    Thailand
    Posts
    4,810
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    ~The Artist Latterly Known as Crazy Hamster~
    922ee590a26bd62eb9b33cf2877a00df
    Currently delving into Django, GIT & CentOS

  4. #4
    SitePoint Member
    Join Date
    Mar 2003
    Location
    Boise
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for fixing my layout. Everything I have done (not much) is at www.potatopimps.com. Any ideas on what I'm doing wrong would be appreciated.

  5. #5
    I want my 4th arrow! garlinto's Avatar
    Join Date
    Jun 2002
    Location
    Riding the electron wave
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Yeavis
    Any ideas on what I'm doing wrong would be appreciated.
    I guess I'm not sure what is "wrong". In viewing your mark-up, I see that you aren't using a third column, nor does your css call for one. So what do you mean by "3-column layout", and what exactly is wrong?

    What are you trying to achieve?
    Ducharme's Axiom: "If you view your problem closely
    enough, you will recognize yourself as part of the problem."


  6. #6
    SitePoint Member
    Join Date
    Mar 2003
    Location
    Boise
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    top, left, right.
    Header, Navigation, Content. Header being on the top, navigation being underneath the header to the left, and content being to the right of navigation. Understand? I'm not sure what I'm doing wrong, maybe I'm missunderstanding this whole CSS stuff.

  7. #7
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    3 columns would be left, center, and right.

    Your navigation is top, left, right. Here's a proposed fix:
    CSS:
    Code:
    #top {
      height: 40px;
    }
    #left {
      width: 20%;
      float: left;  
    }
    #right {
      width: 80%;
      float: left;
    }
    HTML:
    HTML Code:
    <body>
      <div id="top">
         <p>Top header</p>
      </div>
      <div id="left">
         <p>Left navigation</p>
      </div>
      <div id="right">
         <p>Content goes here!</p>
       </div>
    </body>
    That's the basics of it. Add CSS properties and markup as you wish.

  8. #8
    SitePoint Member
    Join Date
    Mar 2003
    Location
    Boise
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What about if I wanted to have a fixed width site. For example, right now the site is set as 760px wide. I want the left nav to be 150px wide, and the content portion to be 610px wide. I'm not wanting to use %'s because they look weird.

  9. #9
    SitePoint Member
    Join Date
    Mar 2003
    Location
    Boise
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  10. #10
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Yeavis
    What about if I wanted to have a fixed width site. For example, right now the site is set as 760px wide. I want the left nav to be 150px wide, and the content portion to be 610px wide. I'm not wanting to use %'s because they look weird.
    Try this CSS instead:
    Code:
    #top { 
    width: 760px;
    height: 40px; 
    } 
    #left { 
    width: 150px; 
    float: left; 
    } 
    #right { 
    width: 610px; 
    float: left; 
    }

  11. #11
    SitePoint Member
    Join Date
    Mar 2003
    Location
    Boise
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for all your help. I know this is stupid basic stuff, but I just couldn't get it to work. However, now it seems to be working just fine. Thanks again..

  12. #12
    SitePoint Member
    Join Date
    Mar 2003
    Location
    Boise
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's another question for you. How can I vertically align text inside a box? If you go to the same webpage as before, you'll see a couple boxes that are aligned to the top. I would like the box that says (125X125) to automatically adjust to center from the top. Any help would be greatly appreciated.

  13. #13
    100% Windoze-free earther's Avatar
    Join Date
    Feb 2003
    Location
    Linuxland
    Posts
    2,788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Yeavis
    Thanks for all your help. I know this is stupid basic stuff, but I just couldn't get it to work. However, now it seems to be working just fine. Thanks again..
    Unfortunately, the layout is breaking at 800 x 600. (The attachment will eventually appear.) CSS just doesn't have the same fluidity as tables. I keep beating my head against it too. You have my sympathy.
    Attached Images Attached Images

  14. #14
    SitePoint Member
    Join Date
    Mar 2003
    Location
    Boise
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How can I center the whole page without messing up the layout? I've tried using {margin:0px auto;} but it screws everything up. Any suggestions would be appreciated.

  15. #15
    100% Windoze-free earther's Avatar
    Join Date
    Feb 2003
    Location
    Linuxland
    Posts
    2,788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Yeavis
    How can I center the whole page without messing up the layout? I've tried using {margin:0px auto;} but it screws everything up. Any suggestions would be appreciated.
    Set your widths in percentages for starts. Just checked it and at full resolution it's OK but if the window is resized it still breaks. The only way I found I could get everything to stay in the right place was to do everything in absolute pixels. It's not flexible (scrollbar) but it always is in place. BTW the 'about us' link at the top isn't positioning correctly either.

  16. #16
    SitePoint Member
    Join Date
    Mar 2003
    Location
    Boise
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, I've made some changes to it and it doesn't break anymore. I don't think that the "about us" link will be out of wack anymore, but I only have a few browsers to check it with.

  17. #17
    SitePoint Enthusiast stationmaster's Avatar
    Join Date
    May 2003
    Location
    barcelona
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    float center

    here's a little something to help you float center.
    Code:
    body
    {   margin: 0;
        padding: 0px;
        background-color: #dcdcdc;
        /*background-image: url(../media/back_tile.gif);*/
    	font-size: 100% ;
    	font-family: arial, helvetica, sans-serif;
    	text-align:center;
    }
    
    #frame {
        background-color: #c0c0c0;
    	margin-top:20px;
    	margin-bottom:20px;
    	margin-right: auto;
    	margin-left: auto;
    	text-align: left; /* Overrides inherited centered value from body */
    	width: 750px;
    	}
    I hope that makes sence, and will help to float.
    I don't much like designs glued to the top left of the window.
    You need to put all your content inside of a div with id="frame"
    Daiv Mowbray twincascos Barcelona
    wordpress pluginswp-superslider.com
    portfolio portfolio.daivmowbray.com
    personal blogwww.daivmowbray.com

  18. #18
    100% Windoze-free earther's Avatar
    Join Date
    Feb 2003
    Location
    Linuxland
    Posts
    2,788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Yeavis
    Okay, I've made some changes to it and it doesn't break anymore. I don't think that the "about us" link will be out of wack anymore, but I only have a few browsers to check it with.
    Yes, everything is looking fine now. Congrats!


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
  •