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/m.../test/index.php
http://www.captainsoftheworld.com/m...ernRepublic.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/m...lic/test/index.
php
> http://www.captainsoftheworld.com/m...lic/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

http://www.thenoodleincident.com/tu...sson/index.html  is a good
site, and in particular, these box layouts:
http://www.thenoodleincident.com/tu...sson/boxes.html

"Els" <els.aNOSPAM@tiscali.nl> wrote in message
news:Xns954AF377B3528Els@130.133.1.4...
> 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