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

tasman.hayes (AT) gmail (DOT) com wrote:

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

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.


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

tasman.hayes (AT) gmail (DOT) com wrote:

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

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.


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

Now playing: Genesis - More Fool Me