Tag Pointers / Divs vs Tables (again)

Dougie Howser!

Anyone got any good tips or links to suitable guides/tutorials?

Coming from tables, I now realise the abomination that they were.

Though I do enjoy being able to do say:

<table>
<tr>
<td width=125>
Menu
</td>
<td width="*">
Rest of Page
</td>
</tr>
</table>


That "*" is the only thing that seems to be missing. Being able to use
up "the rest of the space".

Still.

Im trying to wrap my head around the correct usage of the various types
of tags to avoid using font and span tags for formatting. Such as, h1,
h2, h3, h4, h5, h6 etc instead of multiple uses of span or font.

If you have a blockquote you want to attribute to someone, ie, " -
courtesy of Mr XXX at XYZ Co Ltd", what do you do there? There's no
specific tag as far as I can tell. Is that an appropriate usage for
"<span>"? Or maybe that should be a "P" tag if I don't actually want the
attribution inline with the quote (perhaps if I wanted it on the next line).

My next problem is one of floats.

I can't remember what I have, but I basically have the basic premise of
a three column site where the menu on the left, and the other info on
the right are floats.

something like

<div container>
<div float left>
<div content container>
<div float right for more information>
</div>
</div>
</div>

Which means then when I introduce a HR or some other element, in the
content container, it sweeps behind that floating div.

I then keep finding myself wanting to do things like this:


BIG BOLD TEXT HERE FOR A HEADLINE |
Sample description of the item in question | Centered Image
blah blah blah |

BIG BOLD TEXT HERE FOR A HEADLINE |
Sample description of the item in question | Centered Image
blah blah blah |

BIG BOLD TEXT HERE FOR A HEADLINE |
Sample description of the item in question | Centered Image
blah blah blah |


I mean, that Centered Image, could be an image, could be a form element,
could be some other text. I like the fact that regardless of what's in
there, a Table will vertically and horizontally center the information.
It will also make sure everythings lined up, unlike this abomination:

<div style="width:100px; float:right;">Some floaty element here that I
dont want forcing down the second listitem</div>
<ul class="newscontainer">
<li style=" border-bottom:1px solid #931253;">
<div style="float:right; border:1px solid #f00;">X Marks<br>the
spot</div>
Something or Other Here
</li>
<li class="newsbody" style="clear:right; border-bottom:1px solid
#931253;">
<div style="float:right; border:1px solid #f00;">X Marks</div>
Something or Other Here
</li>
<li style=" border-bottom:1px solid #931253;">
<div style="float:right; border:1px solid #f00;">LARGER X HERE</div>
Something or Other Here
</li>
</ul>

Any thoughts? I keep looking around t'internet, but can't find anything
that gives me a practical guide to complete what I need. I mean, I
could go manually fudge all the heights, and of course, the problem with
using clear:right, is that the second listitem gets shifted because of
that overhanging div...

Cheers
Simon

Simon Dean schreef:

Anyone got any good tips or links to suitable guides/tutorials?

Search in google for "3 column layout" and "holy grail"...
Good examples here: http://www.pmob.co.uk/temp/3colfixedtest_4.htm