View Full Version : CSS for layout? (Ronald?)

01-16-2003, 05:29 PM
I've been seeing a lot on these forums about using CSS for layout instead of tables...I've been writing HTML for many years, and must admit I've never heard of using CSS for this...any good tutorials/instructions how to efficiently implement this?


01-16-2003, 06:05 PM
A random collection of sites with nice infos about CSS usage:


01-17-2003, 02:08 AM
Best CSS positioning tutorial I know of:


01-17-2003, 03:16 AM
Not a tutorial but... Chris Casciano made this a year ago to demonstrate the power of CSS. He promised to make a new layout each day for a month. He didn't manage keep his promise but almost. ;)

Use the dropdown list and note that the HTML doesn't change. Just the CSS file that's linked to it.


01-17-2003, 08:04 AM
As you can see, CSS has it's very own set of display problems to contend with. What's kinda foo nee is that CSS fanatics claim that tables will soon be dropped when they just added them in version 4 browsers. :rolleyes:

(I set a mousetrap with a picture of cheese because I ran out. Unfortunately, I caught a picture of a mouse. :( )

01-17-2003, 05:30 PM
Any CSS fanatic who says tables will be dropped is more of a nutcase.

On the other hand, a CSS fanatic who says tables will be used for tabular information rather than page design is on the mark.


01-17-2003, 06:50 PM
I think the bottom line is that CSS can't create the holy grail - a 3-colum layout where all the columns are flexible, relatively positioned, and don't overlap each other.

It can't be done in CSS. Shame, but I admit I'm not really losing any sleep over it; I have little truck with the semantic arguments - if you keep your data in XML and transform on the server, the semantic purity of the output document becomes much less important; it depends on what you're doing - if you do a lot of DHTML to modify the document structure after loading, then it matters a lot more; if not, it scarcely matters at all.

I think the only *real* problem with tables is that putting the whole page in one table makes it not display until the whole thing has finished loading, but you can easily get round that by splitting content into multiple tables - like this forum does.

01-17-2003, 09:42 PM
Hm, I can envision situations in which a CSS based column layout might be more flexible than the ordinary table markup. Suppose you want to have column A rearranged from left to right of column B. With tables, you're going to change each row and each cell. With CSS, it's a matter of adjusting some numbers for repositioning (ideally).

Of course, as you said, if you rely on some kind of template layer between mere data and it's representation, it's not that much an issue as well.

01-18-2003, 02:31 AM
The problem with the debate of tables versus CSS is that everyone in it has a mind set that says everything is suppsoed to be blocked and laid out like a printed page.

In the old universe of frames and tables a web page was two dimensional, and most layouts tended to be static. In the CSS/XML universe a web page is three dimensional and dynamic.

Tables are no more suited to layout control than any other element. They go used because they were convenient, and there ws nothing else really suited to layout control without a lot of work.

If the content is suited to tabular display then tables are fine and the content can be nicely presented by appling CSS, but most content can be give much richer presentation in three dimensions that allow you to drill down and see the insides of the contens and examine the sides. Only CSS gives the capability of presenting multiple facets dynamically, without much code.

01-18-2003, 02:43 AM
Originally posted by brothercake
I think the bottom line is that CSS can't create the holy grail - a 3-colum layout where all the columns are flexible, relatively positioned, and don't overlap each other.

Sure it can. Assign widths all in percentages, then either float everything, or position: relative; them correctly.

I've regularly done 3 columns for several templates...

01-18-2003, 03:57 PM
Originally posted by jkd
Sure it can. Assign widths all in percentages, then either float everything, or position: relative; them correctly.

A layout like you describe lets the columns overlap each other in very small windows.

Unless I'm much mistaken .... I'd like to see an exampe of what you're saying.

01-18-2003, 11:22 PM
This works in Netscape 6.2, 7.0, and IE 6.0 (the only browsers I have on my home machine):

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
<title>Column Demo</title>
<style type="text/css">
div {
border : thin solid #000000;
float : left;
margin : 1px;
width : 30%;
<div class="column">Column 1</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>

No overlapping and nicely sized.

01-20-2003, 02:28 AM
:o I take it all back ... :thumbsup:

01-20-2003, 03:27 AM
or here (http://bluerobot.com). :D :D

01-20-2003, 10:40 AM
Since my name showed up in the original post (thanks Nick, it's a nice feeling being noticed! :D ), i'll give my two cents:

CSS positioning isn't perfect, and it's use is restricted to newer browsers, and using tables may be easier to achieve certain layouts, but tables aren't meant for layout, there meant for tabular data. Also, excessive use of tables bloats a page's code, where CSS is more compact, when placed in an external style sheet doesn't add to a page's size, and can easily be used on many or all pages in a site.
Furthermore, using tables for layout conflicts with the idea of separating content from presentation, placing what really should strictly be presentation in amongst the content of every page. Consequently, a change in layout means not a single change in a style sheet, but many changes on every single page.
Using tables for a layout designed specifically for a certain device, say a browser on a PC, makes that layout less suitable or even useless for another type of device with different properties, whereas CSS offers a mechanism to use a specific style sheet for a specific device, making the content in a certain page available to a range of devices without having to change a single thing to it.

If you are worried about older browsers, or have designed a layout that is in no way feasible in strict CSS, or don't give a hoot about other devices than browsers on PCs, tables for layout may seem an attractive solution, but be aware of the limitations.
Maybe it's about time we got rid of old, non-standards-compliant browsers.

01-20-2003, 01:03 PM
Good points ...

... much of my insistence on tables over CSS was a desire to continue supporting netscape 4 ...

... but that was then; I've liberated myself from that now, using a simple declaration paradigm:

@media screen {

.. all the CSS


... excludes netscape 4 completely; treating it like an unstyled browser.

Perfick :D