Reputation: 4203

What's the best way to present information in multiple columns?

I have a basic page layout, and wanted to arrange information in columns.

I have managed to do this, but I feel I have done this in a very poor way.

I have made a layer and style called 'leftlayer', which floats to the left. Then 2 layers with a style called 'leftlayer2' which also floats to the left, to preserve the order I wanted for the information. Then a layer called 'rightlayer', which floats to the right.

Should I instead use a table, or put everything in separate layers? What is the best approach?

My code:

<html>
<head>
<title>Test page</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<div id="Layer0">
<div id="Layer1" class="Layer1">
<h3 align="left">A menu</h3>
<div align="left">
<ul class="BLUE">
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
</ul>
</div>
</div>
<div id="Layer2">
<h1>Artcile heading</h1>
<div id="leftlayer" class="leftlayer">
<p><strong>Random info 1: </strong>blah
</p>
<p><strong>Random info 2: </strong>blah blah
</p>
<p><strong>Random info 3: </strong>anything
</p>
<p><strong>Random info 4: </strong>more text
16:46:29 </p>
<p><strong>Random info 5: </strong>and so on
</p>
<p><strong>Random info 6: </strong>such as
</p>
<p><strong>Random info 7: </strong>sport
</p>
</div>
<div class="leftlayer2">
<p><strong>Random info 1: </strong>blah
</p>
<p><strong>Random info 2: </strong>blah blah
</p>
<p><strong>Random info 3: </strong>anything
</p>
<p><strong>Random info 4: </strong>more text
16:46:29 </p>
<p><strong>Random info 5: </strong>and so on
</p>
<p><strong>Random info 6: </strong>such as
</p>
<p><strong>Random info 7: </strong>sport
</p>
</div>
<div class="leftlayer2">
<p><strong>Random info 1: </strong>blah
</p>
<p><strong>Random info 2: </strong>blah blah
</p>
<p><strong>Random info 3: </strong>anything
</p>
<p><strong>Random info 4: </strong>more text
16:46:29 </p>
<p><strong>Random info 5: </strong>and so on
</p>
<p><strong>Random info 6: </strong>such as
</p>
<p><strong>Random info 7: </strong>sport
</p>
<form name="testForm">
<p><input name="radiobutton" value="test1" type="radio">Test</p>
<p><input name="radiobutton" value="test2" type="radio">test</p>
<p><input name="radiobutton" value="test3" type="radio">Test</p>
<p><input name="radiobutton" value="test4" type="radio">test</p>
<input name="Submit" value="Update" type="submit">
</form>
</div>
<div id="rightlayer">
<a href="#">
<img src="img.jpg" height="300" width="199">
</a>
<p>
<a href="#">Click for full description </a>
</p>
<p><a href="#">DELETE</a>
</p>
</div>
<div id="Layer3">
<h1>A list of records</h1>
<table border="0" width="85%">
<tbody>
<tr>
<td width="15%"><strong>Column 1</strong></td>
<td width="10%"><strong>Column 2</strong></td>
<td width="65%"><strong>Column 3</strong></td>
<td width="10%"><strong>Column 4</strong></td>
</tr>
<tr id="article_250405322811">
<td><a href="#">Some info</a></td>
<td><a href="#">more info</a></td>
<td><a href="#">Even more info</a></td>
<td>No more info</td>
</tr>
</tbody>
</table>
</div>
<div id="tablefooter" class="tablefooter">
<div id="tablefooterleft" class="tablefooterleft"><a href="#">&lt;&lt;-First</a>
<a href="#" onclick="updateByPage('Layer3', 'Hardy', '1')">&lt;-Previous</a>
-----------------------------------------------------------------
<a href="#" onclick="updateByPage('Layer3', 'Hardy', '2')">Next -&gt; </a>
<a href="#" onclick="updateByPage('Layer3', 'Hardy', '7')"> Last-&gt;&gt;</a>
</div>
</div>
</div>
</div>
</body>
</html>

The css:

#Layer0 {
  width: 100%;
  height: 100%;
}

body{
margin:10px 10px 0px 10px;
padding:0px;
color:#999999;
font-family:"Trebuchet MS",arial,sans-serif;
font-size:70.5%;

}

#Layer2 {
background:#fff;
color:#000;
voice-family: "\"}\"";
voice-family: inherit;
padding:20px;

}

#Layer2 p {color:#888;}

#Layer2 a, a:link { color:#006633; text-decoration: none;}

#Layer2 a:hover, a:active{ color:#FF6666; text-decoration: none;}

html>body #Layer2 {
}

p,h1,pre {
margin:0px 10px 10px 10px;
font:Arial, Helvetica, sans-serif;
font-size:12px;
line-height: 1.6em;
text-align:justify;
text-decoration:none;
}

h1 {
font-size:2.5em;
text-align: center;
color:#ccc;
padding-top:15px;

}

h3 {
font-size:14px;
color:#999;

}

.leftlayer {
  float: left;
  left: 20%;
  width: 20%;
  height: 100%;
  margin-right: 10%;
}
.leftlayer strong {
  text-align: left;
}
.leftlayer2 {
  float: left;
  width: 20%;
  height: 100%;
  margin-left: 2%;
}
#rightlayer {
  float: left;
}
#Layer3 {
  float: bottom;
}

Upvotes: 2

Answers (3)

markus

Reputation: 40685

No, you shouldn't use a table! < div > tags are the right way to do layouts!

Read about CSS column layouts on the internet:

Against frequent suggestions I don't recommend CSS grids either.

Plus:

you're missing your body tag
you should indent your code, it's hard to read like that

Upvotes: 4

Debajit

Reputation: 47111

The best way to present information in multiple columns, in my opinion, is using a grids framework, like Blueprint CSS.

(Tables are a no-no. Go with div's + CSS)

Blueprint (and other similar frameworks) are

very easy to use
allow you to very easily create/adjust any number of columns you want
work across all browsers (including IE6)
allow you to do very complex grid layouts as well with ease (creating a simple 2 or 3-columnar is still very easy)

The way I see it, hand-coded layouts -- though they work fine -- don't scale well and often require significant redesign when you're trying to add additional layout elements. Layouts with grid frameworks are rather easy to maintain, and you can be up and running in no time (for all kinds of layouts, simple and complex). Give it a try :)

Upvotes: 0

Pavel Bastov

Reputation: 6971

Stick to <div> approach for layout stuff, but display regular tabular data (like records from a table) using the <table> tag (that's exactly why this tag was introduced in the first place).

To master the div-based layout tricks you need to better understand CSS positioning model.

Upvotes: 2

What&#39;s the best way to present information in multiple columns?

Answers (3)

Related Questions

What's the best way to present information in multiple columns?