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

Floated div problem in various browsers

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

Jul 20 '05 #1
Share this Question
Share on Google+
6 Replies


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

Jul 20 '05 #2

P: n/a
On Tue, 19 Aug 2003 09:57:52 +0200, Zaka Ferenc <za***@freemail.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/
Jul 20 '05 #3

P: n/a
On Tue, 19 Aug 2003 11:22:30 +0200, Els
<el*********@PLEASEtiscali.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/
Jul 20 '05 #4

P: n/a
Stephen Poley <sb*****@xs4all.nl>:
On Tue, 19 Aug 2003 11:22:30 +0200, Els
<el*********@PLEASEtiscali.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.

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


John OO
--

<http://webcel.nl/>
<http://www.webcel.nl/bayshop/shop/bayshop.html>

"Time is what prevents everything from happening at once"
- John Archibald Wheeler -
Jul 20 '05 #5

P: n/a
Els
John W. wrote:
Stephen Poley <sb*****@xs4all.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.

Jul 20 '05 #6

P: n/a
Els <el*********@PLEASEtiscali.nl.invalid>:
John W. wrote:
Stephen Poley <sb*****@xs4all.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?


http://www.w3.org/TR/html4/struct/gl...dx-block-level
+
http://www.webcel.nl/html/tables/block.html (Dutch)
John OO
--

<http://webcel.nl/>
<http://www.webcel.nl/bayshop/shop/bayshop.html>

"Time is what prevents everything from happening at once"
- John Archibald Wheeler -
Jul 20 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.