ansaurus

Question

Best way to implement a 3-column website using <DIV> tags?

Answer 1

A:

Try floating the div's to the left, that will keep them all on the same line - assuming there is enough spacing.

Joshua 2008-09-17 13:37:13

Answer 2

A:

Firstly, relative positioning does what you've described: it reserves space in the original location but displays the DIV offset by some amount.

If you float the DIVs then they will stack left-to-right, but this can cause problems.

A three-column layout using CSS is quite hard. Have a look at [http://www.glish.com/css/7.asp]

Anthony Williams 2008-09-17 13:38:27

Answer 3

+6 A:

If you haven't already checked out A List Apart you should, as it contains some excellent tutorials and guidelines for website design.

This article in particular should help you out.

Josh 2008-09-17 13:40:23

Answer 4

A:

Here is a good place to get not only 3 column layouts but certainly more. You will certainly find it useful.

Steve Obbayi 2008-09-17 13:44:52

Answer 5

+1 A:

You may also find some help in the similar Stack Overflow question: three column web design with variable sides

davebug 2008-09-17 13:46:19

Answer 6

+1 A:

3-column "holy grail"

mrinject 2008-09-17 17:05:59

Answer 7

A:

By far the easiest way that I have found to do 3 columns (or any other number of columns split over the available space in weird ways) is YUI Grids. There is a YUI Grids Builder to give you the basic layout. The following will give you a 750px wide basic 3 column layout (split 1/3 1/3 1/3) with a 160px left sidebar. Changing it to to other widths, sidebar configs and column splits is really easy.

1    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
2    "http://www.w3.org/TR/html4/strict.dtd"&gt; 
3   <html> 
4   <head> 
5      <title>YUI Base Page</title> 
6      <link rel="stylesheet" href="http://yui.yahooapis.com/2.5.1/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css"> 
7   </head> 
8   <body> 
9   <div id="doc" class="yui-t1"> 
10     <div id="hd"><h1>YUI: CSS Grid Builder</h1></div> 
11     <div id="bd"> 
12      <div id="yui-main"> 
13      <div class="yui-b">    <div class="yui-gb"> 
14          <div class="yui-u first"> 
15      <!-- YOUR DATA GOES HERE --> 
16              </div> 
17          <div class="yui-u"> 
18      <!-- YOUR DATA GOES HERE --> 
19              </div> 
20          <div class="yui-u"> 
21      <!-- YOUR DATA GOES HERE --> 
22              </div> 
23      </div> 
24  </div> 
25      </div> 
26      <div class="yui-b"><!-- YOUR NAVIGATION GOES HERE --></div> 
27       
28      </div> 
29     <div id="ft">Footer is here.</div> 
30  </div> 
31  </body> 
32  </html>

Peter Kelley 2008-09-18 07:49:35

Answer 8

A:

There are a number of examples and libraries out there you can search on - a couple already listed (A List Apart is a must read).

I've used the Yahoo User Interface Library (YUI) on my last couple of sites and really like it. Yahoo completely supports it and it's quick to understand and use. Here is there CSS for Grids, which allows you to format your page into as many columns and sections as you want.

YUI is nice because you don't have to reinvent the wheel for the foundation of your site, and they do all the work of making sure their foundations work across all browsers. And best of all, it's free.

Baer 2008-09-18 12:56:20

Answer 9

+2 A:

Give BluePrint CSS a try. It is really simple to get started with, yet powerful enough for most applications.

Easy to understand tutorials and examples. Has a typography library that produces decent results straight out of the box.

Mats Wiklander 2008-09-19 10:07:49

Answer 10

A:

I like 960 Grid System. It's a lightweight, easy to use css which devides the screen into 12 (or 16) columns. You can use it for a 3 column design and align the rest of your content accordingly.

sdfx 2008-09-19 10:19:28

Answer 11

A:

For fixed coloumn, just set height:xxxpx will make them equal.

Use this 3 column layout generator to try.

unigogo 2009-02-25 06:18:18

ansaurus

tags:

views:

answers:

Best way to implement a 3-column website using <DIV> tags?

related questions