I have read a lot of opinion on this subject, and have decided that I will use tables where applicable because they are really the best solution.

The root of this discussion ought to be focused around the very simple thesis that HTML is for Layout, and CSS is for Presentation.

This is the premise that CSS was conceived from and should be the decider in cases of doubt. If that is your starting point, then it is nonsense to attempt to lay out tabular data using pure CSS.

The most cogent argument for me is that there is less code to be written if you use tables – you might think that it is quicker to write a couple of DIV’s than to set out a table, but if you take into account the “cross-browser” code and “hacks” that needs to be built into your CSS to make the layout bullet-proof, then it is much simpler to use a table.

Example – To make a “liquid layout” 2 or 3 column standard page that will resize to suit any browser or viewport requires some quite technical CSS plus the attendant Java browser “sniffers” to make it a reliable page – and there is also the likelihood that the “hacks” you need to make it cross-browser compatible could fall over when the next generation of browsers appear. But build that same page with DIVs for header and footer and a 3 cell table to hold the centre columns, and the code is very short and simple and will render perfectly in any browser.

The 2 or 3 center columns are really TABULAR in nature, so it makes sense to use a table, and there are a couple of distinct advantages – like, for instance, the background color of the TD cells will automatically extend to the footer; v-align works properly in TDs; unpredictable things like FLOAT and CLEAR are unnecessary; and TDs automatically extend to accommodate variable data sizes.

I have tried various different techniques for coding liquid layout 2/3 column pages with pure CSS, but have not found a method that is both mean on bandwidth and cross-browser reliable. If anyone does know of such a method – please post a link to it.

I believe it is now imperative to make our pages resizable. The days when “everyone who mattered” used the same size 800×600px screen are long gone. I refuse to scroll sideways to read data and immediately abandon any website that has a page that won’t fit into my normal viewport (as defined by the browser window). Vast numbers of users now have broadband, big screens, and extended desk-tops, but parallel to that there are millions of users using laptops and other machines with restricted desk top space. To code up pages that require a 1280px plus screen is arrogant as well as being stupid – stupid, because you are willfully alienating a significant portion of your potential users.

The task of writing bullet-proof code is getting harder every day; harder because we now have to code for a wider range of browsers, and harder because we have such a fascinating lot of new style effects and tricks available for site design. It makes a lot of sense to use a simple, reliable, old table to control the page content layout, and to reserve CSS for what it does very well and was designed for; i.e., cascading styles down thru your sites pages. I also think it makes a site-wide re-vamp much easier if you don’t have to worry about the layout getting snarled up every time you edit your style sheets.

I’ve been trying for some time to come to grips with the concept of dynamically rendering pages so that bits of the content change without doing a refresh or rewrite.

There are a number of approaches to this with the obvious one being php. However a lot of coders find this whole php thing to be a bit intimidating, and want a way to make things happen without going down the road of learning that whole new language.

I started out working with iFrames and this is a brillant way to insert live updates and video and stuff into a page; but there are some frustrating limitations. Like for instance your iFrame stays the same size no matter what you squirt into it! Consider an Amazon aStore: the front page is about 600px high, but the actual shop pages are 1000px or more so either this pops up the dreaded scroll bars in your frame or else you have masses of white space.

I have found a way to make what I call Dynamic Divs – I.E., they expand or contract to fit the content linked to. This means you can have a fixed page with a block(<div>) of optional content that exactly fits the linked page.

It is an interesting hybrid mix of php, html and Javascript, but no coding skills are needed. Just copy’n'paste the code.

You need to name the file with a .php suffix to get the “php includes” to work, but it is basically simple html. The trick is to load the required page into a (not visible) storage div, extract it’s content into a variable with a little JavaScript, then write it into the div with the “document.getElementById(”alayer”).innerHTML” call. This reads the (hidden) file and writes it to the Dynamic Div.

See a demo of the technique here. Roll over the top links to see the Dynamic Div in action

Here are the four elements that make this work.
1. divs to hold the page to be inserted
2. Javascript to read the data
3. OnMouseover code to insert the content.
4. An ID’d div to insert the new content into.

1. The “storage boxes” look like this:
<div id=”bin1″ class=”bins”><?php include(’demo1.htm’) ?></div>
They have an ID and they need a style class set to display: none; so they are invisible, and there is a php include to load the file to be stored.

2. The Script to “read” the content into the variable looks like this:
<script language=’JavaScript’>
$con1 = document.getElementById(”bin1″).innerHTML;
$con2 = document.getElementById(”bin2″).innerHTML;
</script>
The script gets the “innerHTML” content of the Element “bin1″ and stores it in the variable $con1, and so on.

3. The content can then be written to the page with an onMouseOver call like this:
onmouseover=’document.getElementById(”alayer”).innerHTML=$con1;

4. A Div (ID=aLayer) to receive the content:
<div id=”alayer” style=”width: 750px; background-color:#ffd; “><?php include(’demo0.htm’); ?></div>

Notes:

This technique works best on pages with plain text or simple html. If you load a page with SSI in it, it will fail, because it is not on the server anymore, thus the script can’t work inside a client side page. An embedded PHP include, for instance, can’t work after it has left the server.

Be aware that what you are doing here is nesting complete web pages inside each other. This can have some quite exciting results – for instance if you have style classes in one page, they may conflict with another.
This trick is ideal to dynamically change text and graphic content inside a box(div), but without doing a page refresh or re-writing the page.