Mozilla Firebird, nested divs and background-color

Is my code lacking or is there a bug?

[ronin]

Okay, I've run up against something... I'm not sure if it's a bug in Firebird or whether I've omitted to do something properly... (I've usually found that when a page breaks in Firebird but looks alright in Opera and IE it's because the other two browsers are too forgiving, not because Firebird can't handle it).

I have a fixed width parent div.
Inside the parent div I have one very wide div floated to the left and one narrow div floated to the right.
Inside the left floating div I have two more divs: one narrow one floated to the left and one reasonably wide one floating to the right (which puts it in the centre of the parent div).

This leaves me with three columns inside the fixed width parent div: narrow - wide - narrow.

The wide central column (which has a simple background graphic) is also the longest and I want the background color of the two narrow columns on either side to continue down all the way to the bottom of the central column (even though neither of these two divs are as long).

I thought applying background: #***; to the parent div would solve this problem quite easily... and it works just as I predicted it would in IE and Opera, but not in Firebird which displays no background colour at all: in fact both narrow columns are see-through.

Any ideas why?

Even more oddly, when I apply a float:****; to the parent div, the background works just as it ought to in Firebird (but obviously then the parent div is not where it's supposed to be on the page...)

[ronin]

<bump>
After testing about a hundred variations on a theme I'm beginning to think it is a bug in Mozilla. Can anyone put me out of my misery?

My copy of Firebird is 0.6.1 (yes, I know I need an update).

[drbrain]

How about a stripped-down testcase?

[aevea]

You've got a whole lot of floating going on, and I've found it hard to get consistent cross-browser results when I float more than one major structural element. However, usually it seems like mozilla is the one browser that does it right. The transparency thing is kind of baffling, I'm not sure I understand what you mean. Have you validated the CSS? Dr. Brain is right, it's tough to answer your question without seeing the code.

Adam

[ronin]

It's works consistently in IE and Opera and it even works in Firebird (but only when I apply a float).

Here's a stripped down version:

<div id="parent" style="width:800px; margin:0 auto;">
<div id="menuandpage" style="width:650px; float:left;">
<div id="page" style="float:right; width:450px; background: url(/mybackground.gif);">
<h1>Content</h1>
<p>
Three lines of content to make this column<br>
longer than the other two which it<br>
is on the full-scale version.
</p> 
</div>
<div id="menu" style="float:left; width:200px;">
one line
</div>
</div>
<div id="column3" style="float:left; width:150px;">
one line
</div>
</div>

That's more or less it.

What I'm doing at present, which should work as far as I can see, is apply background: #f00 to the parent div in order to colour in both the left and the right-hand columns
(obviously the centre column gets coloured in as well, but then the graphic goes over the top).

But it's not working.

[Birdman]

You could try adding...

<div style="clear: both;"></div>

...just before closing the parent div.

[ronin]

Thanks, but sadly no luck.

It seems to be something to do with the fact that mozilla counts nested divs as content inside the parent div only if the parent div is floated.

Otherwise it gives the parent div a height of 0px - and hence no visible background - even though it contains the other two divs...

That seems utterly bizarre to me...

I've been experimenting with z-index, but that doesn't seem to work either...

[ronin]

Hooray, I found the answer.
Suzy's arm is very powerful isn't it?
Even when she doesn't participate, she's already answered your question...

For anybody apart from me who wants to know the solution about containing floats in Mozilla (and how after all, Mozilla is right and the others are wrong)...

First read here:

[webmasterworld.com ]

and then read here:

[webmasterworld.com ]

Thanks to all those who helped out.

[ronin]

Birdman, thanks again, I got your solution to work when I added a height to the div, thus:

<div style="height:1px; clear:both;"></div>

I think I'll give that div an id="footer" and be done.

Suzy's use of the :after pseudo element is elegant but I'd rather use something which doesn't require extra content to be placed in the div and then compensated for in order to hide it.

[Crobe]

you also could have added a nbsp to the clearboth <div> and then wouldn't have needed to declare the height.

<div class="clearboth"> &nbsp; </div>

empty elements don't always behave as you'd expect.