Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Jul 2007
    Posts
    571
    Thanks
    25
    Thanked 28 Times in 28 Posts

    3 Column Fixed Layout

    Hey, How do I make a 3 column fixed layout? The trick is I want the middle column (with the content) to be before the two side columns in the xhtml markup.

    ex:
    Code:
    <div id="pagewrap">
    
       <div id="header"></div>
    
          <div id="middle_column"></div>
    
          <div id="left_column"></div>
    
          <div id="right_column"></div>
    
        <div id="footer"></div>
    
    </div>

  • #2
    New Coder
    Join Date
    Feb 2008
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'd just float the left and right columns, and then format the center one
    Code:
    #left_column { float: left; }
    #right_column { float: right; }
    Last edited by F15pilotX; 02-25-2008 at 01:56 AM.

  • #3
    Regular Coder
    Join Date
    Jul 2007
    Posts
    571
    Thanks
    25
    Thanked 28 Times in 28 Posts
    I tried that but what happened was they both floated below my main column. I tried to clear the floats but no success.

  • #4
    New Coder
    Join Date
    Feb 2008
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Look at this page:

    http://www.glish.com/css/7.asp

    Nice thing about trying to help, is I just figured out what I was doing wrong on my site!
    Last edited by F15pilotX; 02-25-2008 at 02:27 AM.

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    y'all missed the part where he wants the content first in the source

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
    <head>
    <title>New document</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    
    html, body {
    padding: 0;
    margin: 0;
    }
    
    body {
    background: #999;
    text-align: center;
    padding: 30px 0;
    }
    
    #outer {
    background: #ddd;
    width: 900px;
    text-align: left;
    margin: 0 auto;
    }
    
    #innerright {
    float: right;
    }
    
    #content {
    float: left;
    width: 500px;
    background: #666;
    }
    
    #rightside {
    float: left;
    width: 200px;
    background: #eee;
    }
    
    #left {
    width: 200px;
    background: #333;
    }
    
    .cb {
    clear: both;
    }
    
    h2 {
    padding: 0;
    margin: 0;
    }
    </style>
    </head>
    <body>
    <div id="outer">
    
    
    <div id="innerright">
    
    <div id="content">
    </div>
    
    <div id="rightside">
    </div>
    <div class="cb"></div>
    </div>
    
    <div id="left">
    </div>
    <div class="cb"></div>
    
    </div>
    
    </body>
    </html>
    it'll have the 3px bug for IE6 but if you use faux columns, easy to ignore.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis


  •  

    Posting Permissions

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