CSS layout problem: Shouldn't this be a simple thing?

I've decided I need to rebuild my website from scratch to work properly
accross browsers (the previous version of the site worked fine in IE6, but
was really wonky in other browsers).

What I'm trying for is a simple layout with a header and two colums (left
and right) positioned immediately below it.

Here's what I've got so far:
http://www.captainsoftheworld.com/mo...test/index.php
http://www.captainsoftheworld.com/mo...rnRepublic.css

As often is the case I suppose, it works perfectly fine in IE. However, I
understand that IE is the worst at properly interpreting CSS; the page looks
quite wrong in Firefox and Mozilla (oh, and the tacky colours are purely for
testing purposes).

Could someone offer a suggestion regarding what I'm doing wrong? I've kept
the HTML and CSS code quite bare to make it easy to look at, I hope.

Thanks very much!

~Geoff

Geoff Hague wrote:

What I'm trying for is a simple layout with a header and
two colums (left and right) positioned immediately below
it.

Here's what I've got so far:
http://www.captainsoftheworld.com/mo...lic/test/index.
php
http://www.captainsoftheworld.com/mo...ic/test/Modern
Republic.css

As often is the case I suppose, it works perfectly fine in
IE.

Because IE has a broken box-model.

However, I understand that IE is the worst at properly
interpreting CSS; the page looks quite wrong in Firefox and
Mozilla (oh, and the tacky colours are purely for testing
purposes).

Could someone offer a suggestion regarding what I'm doing
wrong? I've kept the HTML and CSS code quite bare to make
it easy to look at, I hope.

The problem is that the floats, by their nature, don't
actually use up any space, they're taking out of the normal
flow, just like absolute positioned elements.
This results in the div#SiteBody not being extended to hold
the two floated columns.
The solution to this, is to add a div with the clear:both
property, after the floats, but inside the div#SiteBody.
See my example:
http://locusmeus.com/temp/geoff.html
(with the css inside the file for easy checking)

More info on the subject, floats
http://www.w3.org/TR/CSS21/visuren.html#floats
and the clear property
http://www.w3.org/TR/CSS21/visuren.html#propdef-clear

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Melissa Etheridge - Bring Me Some Water

Els wrote:

The problem is that the floats, by their nature, don't
actually use up any space, they're taking out of the normal
^^^^^^

taken

flow, just like absolute positioned elements.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Michael Jackson - Dirty Diana

"Els" <els.aNOSPAM (AT) tiscali (DOT) nl> wrote

The problem is that the floats, by their nature, don't
actually use up any space, they're taking out of the normal
flow, just like absolute positioned elements.
This results in the div#SiteBody not being extended to hold
the two floated columns.
The solution to this, is to add a div with the clear:both
property, after the floats, but inside the div#SiteBody.
See my example:
http://locusmeus.com/temp/geoff.html
(with the css inside the file for easy checking)

Perfect! Thank you very much!

~Geoff