Floated div problem in various browsers

Hi all,

the page http://info.etr.elte.hu/divtest5.html looks as I expected in
IE6 and Opera 7.11, but the floated divs float out of the containing
blocks (divs) in NN7.1 and Opera 7.0 (what I don't want).
Questions are:
1) IE & Opera7.11 or NN & Opera7.0 display correctly the page ?
2) If IE & Opera7.11 work well is there a workaround for NN & Opera7.0 ?
3) If NN & Opera7.0 are the correct ones how can I make this page to
look the same in all these browsers?

Thanks a lot!

zf

Zaka Ferenc wrote:

Hi all,

the page http://info.etr.elte.hu/divtest5.html looks as I expected in
IE6 and Opera 7.11, but the floated divs float out of the containing
blocks (divs) in NN7.1 and Opera 7.0 (what I don't want).
Questions are:
1) IE & Opera7.11 or NN & Opera7.0 display correctly the page ?
2) If IE & Opera7.11 work well is there a workaround for NN & Opera7.0 ?
3) If NN & Opera7.0 are the correct ones how can I make this page to
look the same in all these browsers?

Thanks a lot!

zf

Add <br style="clear:both;"/> before

" </div>
</div>
</body>
</html> "

--
Els

A mente é egual á uma paraqueda; funciona melhor aberta.

On Tue, 19 Aug 2003 09:57:52 +0200, Zaka Ferenc <zakaf (AT) freemail (DOT) hu>
wrote:

the page http://info.etr.elte.hu/divtest5.html looks as I expected in
IE6 and Opera 7.11, but the floated divs float out of the containing
blocks (divs) in NN7.1 and Opera 7.0 (what I don't want).
Questions are:
1) IE & Opera7.11 or NN & Opera7.0 display correctly the page ?
2) If IE & Opera7.11 work well is there a workaround for NN & Opera7.0 ?
3) If NN & Opera7.0 are the correct ones how can I make this page to
look the same in all these browsers?

You need some form of non-floated content after the floated DIVs to make
the outer DIV extend below them. An empty DIV with a clear property
applied or something like that will do it. Some people here recommend a
HR with visibility: hidden and clear: both.

I'm surprised IE displays as you wanted because IME IE needs an actual
character after the floats (&nbsp; is an obvious candidate) - but as we
all know IE is not predictable.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

On Tue, 19 Aug 2003 11:22:30 +0200, Els
<els.aNOSPAM (AT) PLEASEtiscali (DOT) nl.invalid> wrote:

Zaka Ferenc wrote:

Hi all,

the page http://info.etr.elte.hu/divtest5.html looks as I expected in
IE6 and Opera 7.11, but the floated divs float out of the containing
blocks (divs) in NN7.1 and Opera 7.0 (what I don't want).

Add <br style="clear:both;"/> before

Although this does work in most/all browsers (and it seems sensible to
me that it does) it actually shouldn't according to the spec, as the CSS
spec states "This property may only be specified for block-level
elements". To be on the safe side with respect to future browser
versions, use HR or DIV or some other block-level element instead of BR.

Musing: what about <BR STYLE="display: block; clear: both;"> ?
I'm not sure about that one.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

John W. wrote:

Stephen Poley <sbpoley (AT) xs4all (DOT) nl>:

On Tue, 19 Aug 2003 11:22:30 +0200, Els wrote:

Add <br style="clear:both;"/

Although this does work in most/all browsers (and it seems sensible to
me that it does) it actually shouldn't according to the spec, as the CSS
spec states "This property may only be specified for block-level
elements". To be on the safe side with respect to future browser
versions, use HR or DIV or some other block-level element instead of BR.


p><br style="clear:both;"/></p

Does this make <br> a block-level element?

--
Els

A mente é egual á uma paraqueda; funciona melhor aberta.