Tabless layout

I am trying to make a forum menu page. it will have

  1. Title 150 pixels
  2. Pages viewed 50 pixels
  3. Author 70 pixels
  4. Date posted

etc

How do I best lay that out without tables.

I was thinking of four divs within a div or each line. Then say twenty lines for the various posts and these all within a master div

How would I do that according to the best standards with a 1 line border

Do those pixels relate to width?

Perhaps provide a screen shot of what you are aiming at, as it’s not clear what you are describing. It’s also dangerous to talk in terms of ‘lines’. Let the content and font-size (which you can’t control) determine how many lines there are.

It would be something like this
CSS - SitePoint Forums

The menu page for a forum. With columns for each entry such as thread, lastpost, replies and views.

Too vague for me, I’m afraid. You didn’t say what the pixels were about.

Yes the pixels are about width.

The exact page is below in my signiture. with the following

  1. 20 rows
  2. 3 columns (150pixels width,70 pixels width and 70 pixels width )
  3. borders around all boxes

If you are going to have columns and rows with varying content (e.g. multiple lines in some posts) then I would be inclined to stick with a table especially as you want equal borders around everything. I’m not sold on the idea that forum posts are not tabular especially when you have definite rows and columns with titles.

If you only want IE8+ support then you can do it with CSS using the display:table properties quite easily.


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
p {margin:0 0 1em;padding:0 5px;}
.wrap {display:table}
.inner {display:table-row}
.cola, .colb, .colc {
    width:70px;
    padding:10px 0;
    display:table-cell;
    background: green;
    border:1px solid #000;
}
.cola {width:150px}
.colb {background: red;}
.colc {background: blue;}

/* "Padding" of the columns */
</style>
<!--[if lte IE 7]>
<style type="text/css">
.wrap{float:left;clear:both}
.cola,
.colb,
.colc {
    float:left;
}

</style>
<![endif]-->
</head>
<body>
<div class="wrap">
    <div class="inner">
        <div class="cola">
            <p>Col A</p>
        </div>
        <div class="colb">
            <p>Col B</p>
        </div>
        <div class="colc">
            <p>Col C</p>
        </div>
    </div>
    <div class="inner">
        <div class="cola">
            <p>This is some text : This is some text: This is some text : This is some text: This is some text : This is some text: This is some text : This is some text: This is some text : This is some text: This is some text : This is some text: This is some text : This is some text: </p>
        </div>
        <div class="colb">
            <p>This is some text : This is some text: This is some text : This is some text: This is some text : This is some text: This is some text : This is some text: This is some text : This is some text: This is some text : This is some text: This is some text : This is some text: </p>
        </div>
        <div class="colc">
            <p>This is some text : This is some text: This is some text : This is some text: This is some text : This is some text: This is some text : </p>
        </div>
    </div>
</div>
</body>
</html>


Hi

Well the example I gave I wanted to copy was the sitepoints forum itself. But they use tabels so maybe I should take that as a hint

Thanks paul.

I tried it myself but it went all wrong.

That may change soon, though. (: