SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Jun 2004
    Location
    northborough
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question 3 column fixed width template

    Hi there,

    i know there are alot of templates out there for 3 column fixed width- but everyone i try seems not to work the way i want it to.

    I need a 3 column fixed width- and that included the center column to be fixed. I need it to be 800 pixels wide. When i try to go and resize a fixed width template- everything scrambles around. I would like the footer to be centered at the bottom.

    and I need it to work on as many browsers as possible!

    What does everyone recommend for a solid, dependable template i can work with?

    Here is an example of pretty much the style i am lookign for:http://www.cfg1.com/

    I have tried hacking around with this style sheet and strip out all the extras- and i just can not seem to get it to work!

    thanks!
    sha

  2. #2
    SitePoint Guru
    Join Date
    May 2004
    Location
    santa rosa, ca
    Posts
    969
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How about the following code from http://www.devarticles.com/c/a/Web-S...out-with-CSS/5
    You could just add another 150px column on the right, and subtract 150px from the content column which is 650 in this example.
    <html>
    <head>
    <title>TWO-COLUMN FIXED LAYOUT WITH FLOATING BOXES</title>
    <style type="text/css">
    <!--
    body {
    margin: 0px;
    padding: 0px;
    }
    #header {
    background: #0f0;
    width: 800px;
    height: 100px;
    }
    #leftcol {
    background: #f00;
    float: left;
    width: 150px;
    height: 500px;
    }
    #content {
    background: #fff;
    float: left;
    width: 650px;
    height: 500px;
    }
    #footer {
    background: #0f0;
    clear: left;
    width: 800px;
    height: 100px;
    }
    -->
    </style>
    </head>
    <body>
    <div id="header">Header Section</div>
    <div id="leftcol">Left Section</div>
    <div id="content">Content Section</div>
    <div id="footer">Footer Section</div>
    </body>
    </html>

    Last edited by SantaRosaDesign; May 26, 2005 at 12:27.
    nondenominational, noncommercial, nonprofit,
    listener-supported, 24-hour, Christian ministry:
    Listen Live Online

  3. #3
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Hi,

    Here's a basic 3 col fixed:

    html:
    Code:
    <div id="wrap">
    
    <div id="header">
    <h1>Header Text</h1>
    </div>
    
    <div id="left">
    left stuff
    </div>
    
    <div id="right">
    right stuff
    </div>
    
    <div id="center">
    center content
    </div>
    
    <div id="footer">
    footer
    </div>
    
    </div>
    css:

    Code:
    body {
    text-align: center;
    }
    
    div {
    text-align: left;
    }
    
    #wrap {
    width: 700px;
    margin: 0 auto;
    }
    
    #header {
    background: blue;
    height: 250px;
    }
    
    #left {
    float: left;
    width: 150px;
    }
    
    #right {
    float: right;
    width: 250px;
    }
    
    #center {
    margin: 0 250px 0 150px;
    }
    
    #footer {
    clear: both;
    }

  4. #4
    SitePoint Addict
    Join Date
    Jun 2004
    Location
    northborough
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi there,

    many thanks! I guess i needed to start with somethign really simple- it is helping!

    I also found this to be a useful tutorial:
    http://joshuaink.com/blog/196/a-simp...column-layouts

    thanks again!
    sha


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
  •