3 floated DIVs in a row in IE - gap between last two DIVs - why?

I'm experimenting with converting a site from a table layout to CSS.
I'm floating three DIVs in a row for the top of a website (a logo,
navigation buttons and a email list signup box). The DIVs have a grey
background.

When I view the page in Firefox, I get what I hoped for: there is a
solid grey rectangle at the top of the website. When I view the page in
Internet Explorer 6 (WinXP), there is a gap between two right hand DIVs
(i.e. a vetical bar with the page's background color).

What's going on? How do I get IE to play ball?

I've written a simplified test case; see the HTML below, or
http://home.exetel.com.au/tas/boxgap/test01.html

Thanks,
Tasman

p.s. I notice Firefox has vertical space before the text in the first
two DIVs, and no vertical space before the text in the third DIV. Does
anyone know why this is?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test02</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<style>
body {
background-color:#ffcc00;
}
div#logo {
float:left;
height:91px;
width:135px;
background-color:#e0d2be;
}
div#sitemenu {
float:left;
height:91px;
width:407px;
background-color:#e0d2be;
}
div#emailjoin {
height:91px;
background-color:#e0d2be;
}
</style>
</head>

<body>

<div id="logo">
<p>logo</p>
</div>

<div id="sitemenu">
<p>site menu</p>
</div>

<div id="emailjoin">
<p>join our emailing list</p>
</div>

</body>
</html>

tasman.hayes@gmail.com wrote:
[color=blue]
> I'm experimenting with converting a site from a table layout to CSS.
> I'm floating three DIVs in a row for the top of a website (a logo,
> navigation buttons and a email list signup box). The DIVs have a grey
> background.
>
> When I view the page in Firefox, I get what I hoped for: there is a
> solid grey rectangle at the top of the website. When I view the page in
> Internet Explorer 6 (WinXP), there is a gap between two right hand DIVs
> (i.e. a vetical bar with the page's background color).
>
> What's going on? How do I get IE to play ball?
>
> http://home.exetel.com.au/tas/boxgap/test01.html[/color]

Well, you *don't* have 3 floating divs.
You have 2 floating divs, and one that isn't floated.
[color=blue]
> p.s. I notice Firefox has vertical space before the text in the first
> two DIVs, and no vertical space before the text in the third DIV. Does
> anyone know why this is?[/color]

Floated divs act differently than non-positioned divs.
In the the first two divs, the top-margin of the <p> is encompassed in
the div. In the third div (not floated) it isn't.
If you'd put a border on the third, or a padding, or float it, the
same space would be there.

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Now playing: Genesis - More Fool Me

Thanks Els!
I added "float: left" to the last DIV and it works fine.
The fixed page is at http://home.exetel.com.au/tas/boxgap/test02.html

Tasman

Els wrote:[color=blue]
> tasman.hayes@gmail.com wrote:
>[color=green]
> > I'm experimenting with converting a site from a table layout to CSS.
> > I'm floating three DIVs in a row for the top of a website (a logo,
> > navigation buttons and a email list signup box). The DIVs have a grey
> > background.
> >
> > When I view the page in Firefox, I get what I hoped for: there is a
> > solid grey rectangle at the top of the website. When I view the page in
> > Internet Explorer 6 (WinXP), there is a gap between two right hand DIVs
> > (i.e. a vetical bar with the page's background color).
> >
> > What's going on? How do I get IE to play ball?
> >
> > http://home.exetel.com.au/tas/boxgap/test01.html[/color]
>
> Well, you *don't* have 3 floating divs.
> You have 2 floating divs, and one that isn't floated.
>[color=green]
> > p.s. I notice Firefox has vertical space before the text in the first
> > two DIVs, and no vertical space before the text in the third DIV. Does
> > anyone know why this is?[/color]
>
> Floated divs act differently than non-positioned divs.
> In the the first two divs, the top-margin of the <p> is encompassed in
> the div. In the third div (not floated) it isn't.
> If you'd put a border on the third, or a padding, or float it, the
> same space would be there.
>
>
> --
> Els http://locusmeus.com/
> accessible web design: http://locusoptimus.com/
>
> Now playing: Genesis - More Fool Me[/color]

3 floated DIVs in a row in IE - gap between last two DIVs - why?

re: 3 floated DIVs in a row in IE - gap between last two DIVs - why?

re: 3 floated DIVs in a row in IE - gap between last two DIVs - why?

Similar HTML / CSS bytes

/bytes/development

/bytes/it

/bytes/about