Best way of laying out webpages?

Energize · 27 Feb 2009 at 18:42

What is the best/standard technique for website layouts these days? I have been experimenting with tables, however people say don't use them for some reason or another. For different aspect ratios should I use a script to adjust the size and location of elements?

swinnie · 27 Feb 2009 at 18:44

HTML (I prefer XHTML Strict) and CSS. Use divs.

I used to use tables, but was converted with Divs as the power of the CSS behind it is incredible.

J.B · 27 Feb 2009 at 18:48

Nothing annoys me more than a page designed in tables, divs are the way forward!

fini · 27 Feb 2009 at 18:49

Divs you div!

Tripnologist · 27 Feb 2009 at 18:51

As has already been said,
- Learn proper (x)html and css. If you want to get anywhere, learn standards right from the outset.
- Read up on fixed, fluid and elastic layouts. IMO, there are times and situations to use each. Fixed width are most widely used for obvious reasons (more control over positioning and style).
- You can use one of many JS libraries but I suggest choosing one and sticking with it. I, and many many others, use jquery.

PMWD · 27 Feb 2009 at 19:21

Energize said:
What is the best/standard technique for website layouts these days? I have been experimenting with tables, however people say don't use them for some reason or another. For different aspect ratios should I use a script to adjust the size and location of elements?

I think once you start using css properly you'll quickly see what the "some reason or another" is.

Image you're styling a table for each section. You're looking at:

Code:

<table cellspacing="0" class="is-best-option-alternatively" style="border:0;margin:0;padding:0;width:980px;">
<tr>
<td>Here is my info</td>
</tr>
</table>

which is just tons of code before you've even given the user and search engine robots anything to look at. Slower loading pages, more clutter. A div alternative:

Code:

<div class="info">Here is my info</div>

gets you all the way around that, and you just use an external stylesheet to which only needs to load/cache once for the whole site

Code:

div.info { border:0;margin:0;padding:0;width:980px; }

It also means you only have one file to change and update when you need to do a sitewide update. Definitely worth looking at. The number of reasonably recent built sites we get asked to resolve issues on and get more prominant search engine positins that have been built using tables is staggering.