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

HTML & CSS
1

Hey all,

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


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

Floating is the best for columns because it allows widths :slight_smile:

  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 :slight_smile:
3

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.

4

Thank you both! Works like a charm.

5

No, not at all :slight_smile:

6

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.


<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>
7

Does one column have to be smaller than the others?