Mozilla <div> can't see nested floated <div>?

[Philip]

I am trying to make a bunched of left-floated divs that will be
contained in a larger div. the floated divs all contain a left-floated
img and text of varying sizes. If I don't set a height (or height:auto)
the larger div doesn't seem to see the nested divs, and they spill out
the bottom.

IE seems to automatically resize the larger div as long as I set the
height to 100% or any pixel size.

Mozilla doesn't recognize the percent, and if I set it to a particular
pixel height, it will not readjust and the nested divs may still over flow

Is there a way to get Mozilla to actually put the nested divs in the
larger div?

You can see a practice page here:
http://www.happymagpie.com/cssexample.html
The blue boxes will contain images and text of different sizes. They
should be in two columns and surrounded by a red box. The page will
eventually have several red boxes, so I can't simply do a two column page.
This seems like such an obvious problem; there must be an obvious
solution I'm overlooking?
Phil

[Els]

Philip wrote:

I am trying to make a bunched of left-floated divs that
will be contained in a larger div. the floated divs all
contain a left-floated img and text of varying sizes. If I
don't set a height (or height:auto) the larger div doesn't
seem to see the nested divs, and they spill out the bottom.

IE seems to automatically resize the larger div as long as
I set the height to 100% or any pixel size.

Mozilla doesn't recognize the percent, and if I set it to a
particular pixel height, it will not readjust and the
nested divs may still over flow

Is there a way to get Mozilla to actually put the nested
divs in the larger div?

Yes, the above is normal behaviour, it's IE that is the odd one
out.
Just put <div style="clear:both;"></div> inside the container
div, after the contents, right before the </div>.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Cliff Richard - Cliff Richard - Travellin' Light

[.]

Els wrote:

Philip wrote:

Is there a way to get Mozilla to actually put the nested
divs in the larger div?

<snip>
Yes, the above is normal behaviour, it's IE that is the odd one
out.
Just put <div style="clear:both;"></div> inside the container
div, after the contents, right before the </div>.

D'oh! Amazingly simple answer, answered amazingly fast. I should have
given up and asked an hour ago....

Thank you

Phil

[Els]

.. wrote:
[.==Philip]

Els wrote:

Philip wrote:

Is there a way to get Mozilla to actually put the nested
divs in the larger div?

<snip>

Yes, the above is normal behaviour, it's IE that is the
odd one out.
Just put <div style="clear:both;"></div> inside the
container div, after the contents, right before the
</div>.

D'oh! Amazingly simple answer, answered amazingly fast. I
should have given up and asked an hour ago....

I wasn't awake yet an hour ago ;-)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Gidi Gov - Fruit of the Heat