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

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

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

tasman.hayes@gmail.com - 30 Jan 2006 07:58 GMT

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>

Reply to this Message

Els - 30 Jan 2006 08:38 GMT

> 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,
[quoted text clipped - 9 lines]
>
> http://home.exetel.com.au/tas/boxgap/test01.html

Well, you *don't* have 3 floating divs.
You have 2 floating divs, and one that isn't floated.

> 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?

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.

Signature

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

Now playing: Genesis - More Fool Me

Reply to this Message

Tasman - 31 Jan 2006 01:38 GMT

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

> > 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,
[quoted text clipped - 28 lines]
>
> Now playing: Genesis - More Fool Me

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / January 2006

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