SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2010
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    4 Column Layout: Doing it right but doing it... wrong?

    Hey all,

    So I got a 4-column layout up and running using only position:absolute and setting the left most margin. Here:

    Code:
    body {
    font-size: 90%;
    font-family: calibri,helvetica,sans-serif;
    background:#FFFFFF;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    text-align:center; /*center #pageWrapper in IE 5.x */
    }
    
    #textWrapper {
    margin-left: auto;
    margin-right: auto;
    text-align:left;
    width: 992px;}
    
    #column1, #column2, #column3, #column4 {
    padding-top: 30px;
    }
    
    #column1 {
    position: absolute;
    width: 211;
    }
    
    #column2 {
    position: absolute;
    width: 211;
    margin-left: 241px;
    }
    
    #column3 {
    position: absolute;
    width: 211;
    margin-left: 482px;
    }
    
    #column4 {
    position: absolute;
    width: 211;
    margin-left: 723


    But just to double check myself, I did a few searches on how other people recommend doing 3+ column layouts. Needless to say, I'm here because I cannot find my method replicated.

    In all the discussion, there's a lot of talk about the importance of floating layouts, as well as, splitting the above four columns into additional DIVs. I am very confused. Basic questions:

    Is this code satisfactory? And if not, what's the preferred way?

    Thanks!

  2. #2
    SitePoint Wizard
    Join Date
    Oct 2005
    Posts
    1,832
    Mentioned
    5 Post(s)
    Tagged
    1 Thread(s)
    No, do not use absolute positioning for columns. Float your columns. You generally do not want to screw with the natural layout flow of your pages by using positioning unless absolutely necessary.

    Code:
    <html>
    <head>
    
    <style type="text/css">
    
    .wrap {
    width: 800px;
    }
    
    .col1 {
    width: 100px;
    background-color: blue;
    }
    
    .col2 {
    width: 200px;
    background-color: orange;
    }
    
    .col3 {
    width: 200px;
    background-color: red;
    }
    
    .col4 {
    width: 200px;
    background-color: green;
    }
    
    .col1, .col2, .col3, .col4 {
    float: left;
    height: 500px;
    }
    
    
    </style>
    </head>
    
    <body>
    <div class="wrap">
    
    <div class="col1">Column 1</div>
    <div class="col2">Column 2</div>
    <div class="col3">Column 3</div>
    <div class="col4">Column 4</div>
    <div style="clear: both;"></div> <!-- You must have this to clear your floats! -->
    <div>More stuff can go here.</div>
    
    </div>
    
    </body>
    </html>

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2010
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Does one column have to be smaller than the others?

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    No, not at all
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Enthusiast
    Join Date
    Jan 2010
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you both! Works like a charm.

  6. #6
    SitePoint Wizard
    Join Date
    Oct 2005
    Posts
    1,832
    Mentioned
    5 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by kp606 View Post
    Does one column have to be smaller than the others?
    No. I just did that as a demonstration. You can set the columns to any width you want as long as they do not exceed the width of the container "wrap", which you can also set to any width you want. If your floated columns exceed the width of their parent container, the one furthest on the right will drop below the other floated columns.

    In addition, you can have multiple columns within each column so you could have a newspaper-like layout if you wanted. Just remember to use "clear: both;" after every set of floated columns.

    You could also use display:inline on divs to create a column layout. However, Firefox puts an inexplicable space between each column and, worst of all, you cannot specify a minimum width because inline elements have no width.

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cheesedude View Post
    You could also use display:inline on divs to create a column layout. However, Firefox puts an inexplicable space between each column and, worst of all, you cannot specify a minimum width because inline elements have no width.
    Floating is the best for columns because it allows widths
    1) ALl browsers will put the space between each column with display:inline because since it is an inline element, it renders the white space in the HTML, closing that up in the actual source code would eliminate it (or connect it in the HTML via comments
    2) Floating is the way
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •