Replacing Tables with CSS

Html tables are supposed to be used to present tabular data, not layout web pages.
However using tables for layout is a widespread, if undesirable practice.
So how do we do layout 'correctly'.

Here is a simple two cell table with a graphic in one cell and text in another

A Bird In Flight

So how do we use CSS to get the same effect.

We can use side by side div tags and CSS to simulate a two column layout.

We could do this by using absolute positioning on div tags.

Alternatively we can sit the div tags side by side by using the css attribute float.

Here is the style sheet code

.leftcol {float:left;width:200px;font-size:20pt;}

We set the left hand Div to have a width and float:left.

In this way the image in the right hand div is displayed alongside the text in the left hand div.

---