SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Three Column Layout Error

    For some reason in the layout that I'm working on the third column in my layout is going beneath the second. I'm pretty sure that I've done everything right so I don't know whats wrong.

    http://www.rochesterrhythm.com/codedstufftestthingy

    If I put float: left; into the div for "center" then the center div will go below the left and the right will be on the top.

    Any help is greatly appreciated!

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    f you want the three coumns side by side and appearing in the same order that they are declared in the html, float them all left using the required margins between them. Due to IE6's doubled float margin bug, you will also need inline display on the left column :
    Code:
    #left {
    width: 152px;
    margin: 0 4px 0 2px;
    float: left;
    dsplay: inline;
    }
    
    #center {
    width: 504px;
    margin: 0 4px 0 0;
    float: left;
    }
    
    #right {
    width: 152px;
    float: left;
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ummm... that just made it worse :\ .

  4. #4
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Huh, in what way? - works fine if I change those styles live on your site.

  5. #5
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It positions all of divs (left, center, right) below eachother with the respective left margin.

    edit...
    I left the margins in on the right div and one extra one in on the center, but I copied right from your code and it works now. Thanks!!!


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
  •