This is Interesting: Free Magazines for Graphics designers and webmasters
Home > Archive > Stylesheets > August 2004 > CSS layout problem: Shouldn't this be a simple thing?
You are viewing an archived Text-only version of the thread.
To view this thread in it's original format and/or if you want to reply to
this thread please [click here]
| Author |
CSS layout problem: Shouldn't this be a simple thing?
|
|
| Geoff Hague 2004-08-23, 7:19 pm |
| 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
| |
|
|
| Geoff Hague 2004-08-26, 12:27 pm |
| "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
|
|
|
| | Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |
|