By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,199 Members | 1,440 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,199 IT Pros & Developers. It's quick & easy.

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

P: n/a
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
Jul 20 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
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 vo. O resto imperfeito.
- Renato Russo -
Now playing: Cliff Richard - Cliff Richard - Travellin' Light
Jul 20 '05 #2

P: n/a
.
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

Jul 20 '05 #3

P: n/a
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 vo. O resto imperfeito.
- Renato Russo -
Now playing: Gidi Gov - Fruit of the Heat
Jul 20 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.