Really basic float right problem cross browser

09-23-2009

I've come across this small annoying problem many times but never
managed to figure out a satisfactory solution.
It's incredibly simple: an element that is floated right which has
inline content in before it looks different in every browser.

In the past, all browsers rendered the floated element down a line
which meant a negative margin-top would fix the problem but the latest
version of firefox and chrome (correctly) display the floated content
on the same line as the rest of the inline stuff.

I've found one workaround: putting the floated element before the
inline content correctly renders it in the right spot but I'd prefer
to keep the HTML clean and fix this with CSS. Any Ideas?

Look at this in FF and then IE and you'll see what I mean:

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head></head>
<body>
Some inline content<div style="float:right">floated right!</div>
</body>
</html>

09-23-2009

In article
<bed654db-dd54-4d23-a4f5->,
Ciaran <> wrote:

> I've come across this small annoying problem many times but never
> managed to figure out a satisfactory solution.
> It's incredibly simple: an element that is floated right which has
> inline content in before it looks different in every browser.
>
> In the past, all browsers rendered the floated element down a line
> which meant a negative margin-top would fix the problem but the latest
> version of firefox and chrome (correctly) display the floated content
> on the same line as the rest of the inline stuff.
>
> I've found one workaround: putting the floated element before the
> inline content correctly renders it in the right spot but I'd prefer
> to keep the HTML clean and fix this with CSS. Any Ideas?
>
> Look at this in FF and then IE and you'll see what I mean:
>
> DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
> www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> <html>
> <head></head>
> <body>
> Some inline content<div style="float:right">floated right!</div>
> </body>
> </html>

Why would you be using transitional as a doctype? What are you
transitioning from, as a well known regular around here likes to say?

Anyway, all of my Mac browsers show the same. But this does reveal an
unexpected bug in my FF 3.5.3 (and possibly independent of this problem
you are seeing), namely that the right float disappears completely at
narrow browser window sizes! It is perhaps connected to that even the
inline text will not wrap at narrow browser sizing. Curious indeed.

FF has always been a bit funny in the past its engagement with the float
rules.

The more logical way to do your above is to

<div>
<div style="float:right">floated right!</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque
augue. Suspendisse consectetuer velit nec neque. Duis nec orci quis
nulla egestas fermentum. Ut quis eros. Aenean at augue vitae quam
posuere vehicula. Pellentesque habitantmorbi tristique senectus et netus
et malesuada fames ac turpis egestas. Maecenas justonunc, porta sed,
molestie eget, adipiscing id, ante. Cum sociis natoque penatibus
etmagnis dis parturient montes, nascetur ridiculus mus. Suspendisse
potenti. Nunc blanditmagna id odio sodales luctus. Nulla quam magna,
viverra quis, dignissim blandit, viverra nec, odio.
</div>

or

<div style="float:right">floated right!</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Pellentesque augue. Suspendisse consectetuer velit nec neque. Duis nec
orci quis nulla egestas fermentum. Ut quis eros. Aenean at augue vitae
quam posuere vehicula. Pellentesque habitantmorbi tristique senectus et
netus et malesuada fames ac turpis egestas. Maecenas justonunc, porta
sed, molestie eget, adipiscing id, ante. Cum sociis natoque penatibus
etmagnis dis parturient montes, nascetur ridiculus mus. Suspendisse
potenti. Nunc blanditmagna id odio sodales luctus. Nulla quam magna,
viverra quis, dignissim blandit, viverra nec, odio.</p>

This gets the general case for when the normal text (which btw in HTML
4.01 should not be bare in BODY but wrapped in a block element) is
longer but you want that the float is at the top. The text wrapping and
wrapping around the float; if you don't want the very latter, give a
right margin to the inline wrap (paragraph in the last example), even a
width to suit.

--
dorayme

09-23-2009

On 22 Sep 2009, Ciaran <> wrote:

> I've come across this small annoying problem many times but never
> managed to figure out a satisfactory solution.
> It's incredibly simple: an element that is floated right which has
> inline content in before it looks different in every browser.
>
> In the past, all browsers rendered the floated element down a line
> which meant a negative margin-top would fix the problem but the
> latest version of firefox and chrome (correctly) display the floated
> content on the same line as the rest of the inline stuff.
>
> I've found one workaround: putting the floated element before the
> inline content correctly renders it in the right spot but I'd prefer
> to keep the HTML clean and fix this with CSS. Any Ideas?
>
> Look at this in FF and then IE and you'll see what I mean:
>
> DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
> www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> <html>
> <head></head>
> <body>
> Some inline content<div style="float:right">floated right!</div>
> </body>
> </html>

Well, for one thing that's invalid markup so it might not be so
surprising that it renders differently in different browsers. Inline
content cannot be contained in the <body> "naked"; it must be nested in
a block element.

--
Neredbojias
http://www.neredbojias.org/
http://www.neredbojias.net/

09-23-2009

>Why would you be using transitional as a doctype? What are you
>transitioning from, as a well known regular around here likes to say?

The doctype makes no difference as fa as I can tell. Strict and
Transitional produce the same problem. See example below

>The more logical way to do your above is to
><div style="float:right">floated right!</div>
><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>...

Yes I mentioned placing the float before the inline my post but I'd
prefer a CSS solution. Floated right content should appear beneath
main content when CSS is off.

>Well, for one thing that's invalid markup so it might not be so
>surprising that it renders differently in different browsers. Inline
>content cannot be contained in the <body> "naked"; it must be nested in
>a block element.

OK well imagine I originally posted this then:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd"><html>
<head>
<title>test</title>
</head>
<body>
<span>Some inline content<span><div style="float:right">floated right!
</div>
</body>
</html>

The latest FF and Chrome on PC render the float at the top of the page
while IE8 and almost all older browsers render it down a line.

Any ideas what's going on here?

Ciarán

09-23-2009

In article
<45311ca8-1504-48e8-a68c->,
cronoklee <> wrote:

> >Why would you be using transitional as a doctype? What are you
> >transitioning from, as a well known regular around here likes to say?
>
> The doctype makes no difference as fa as I can tell. Strict and
> Transitional produce the same problem. See example below
>
Lets agree that we all should use a good doctype declaration and be
daring and say it is 4.01 Strict for the moment.
>
> >The more logical way to do your above is to
> ><div style="float:right">floated right!</div>
> ><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>...
>
>
> Yes I mentioned placing the float before the inline my post but I'd
> prefer a CSS solution. Floated right content should appear beneath
> main content when CSS is off.
>

As mentioned, if you put the floated element to the right of mere inline
content and the latter is lots that wrap to a few lines, you might not
get the float appearing quite where you want it in vertical space. Let's
see below...

>
> >Well, for one thing that's invalid markup so it might not be so
> >surprising that it renders differently in different browsers. Inline
> >content cannot be contained in the <body> "naked"; it must be nested in
> >a block element.
>

> OK well imagine I originally posted this then:
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
> TR/html4/strict.dtd"><html>
> <head>
> <title>test</title>
> </head>
> <body>
> <span>Some inline content<span><div style="float:right">floated right!
> </div>
> </body>
> </html>
>

Let's close your SPAN. But even so, this does not get over the point you
are responding to because SPAN itself is an inline element.

I would be rid of span and use a paragraph element. But, for the point I
make now, it will make no difference, either! If you style the P or the
SPAN with style="float: left;", you should see what you want to see in
the recalcitrant browsers and have the right float text appear under the
left if CSS is off.

Is this a "CSS solution" that you wanted?

Why is there such a difference in browsers in your original case? Ask
Microsoft, they produced buggy browsers because they were careless and
too much on their minds at the time. Getting them to reasonable
standards has been a bit like getting North Korea to give up nuclear
weapon capability.

>
> The latest FF and Chrome on PC render the float at the top of the page
> while IE8 and almost all older browsers render it down a line.
>
> Any ideas what's going on here?
>

--
dorayme

09-24-2009

On Sep 24, 12:09*am, dorayme <doraymeRidT...@optusnet.com.au> wrote:
> In article
> <45311ca8-1504-48e8-a68c-4aec5d9fb...@y20g2000vbk.googlegroups.com>,
>
> *cronoklee <cronok...@hotmail.com> wrote:
> > >Why would you be using transitional as a doctype? What are you
> > >transitioning from, as a well known regular around here likes to say?
>
> > The doctype makes no difference as fa as I can tell. Strict and
> > Transitional produce the same problem. See example below
>
> Lets agree that we all should use a good doctype declaration and be
> daring and say it is 4.01 Strict for the moment.
>
>
>
> > >The more logical way to do your above is to
> > ><div style="float:right">floated right!</div>
> > ><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>...
>
> > Yes I mentioned placing the float before the inline my post but I'd
> > prefer a CSS solution. Floated right content should appear beneath
> > main content when CSS is off.
>
> As mentioned, if you put the floated element to the right of mere inline
> content and the latter is lots that wrap to a few lines, you might not
> get the float appearing quite where you want it in vertical space. Let's
> see below...
>
>
>
>
>
> > >Well, for one thing that's invalid markup so it might not be so
> > >surprising that it renders differently in different browsers. *Inline
> > >content cannot be contained in the <body> "naked"; it must be nested in
> > >a block element.
>
> > OK well imagine I originally posted this then:
> > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
> > TR/html4/strict.dtd"><html>
> > <head>
> > <title>test</title>
> > </head>
> > <body>
> > <span>Some inline content<span><div style="float:right">floated right!
> > </div>
> > </body>
> > </html>
>
> Let's close your SPAN. But even so, this does not get over the point you
> are responding to because SPAN itself is an inline element.
>
> I would be rid of span and use a paragraph element. But, for the point I
> make now, it will make no difference, either! If you style the P or the
> SPAN with style="float: left;", you should see what you want to see in
> the recalcitrant browsers and have the right float text appear under the
> left if CSS is off.
>
> Is this a "CSS solution" that you wanted?
>
> Why is there such a difference in browsers in your original case? Ask
> Microsoft, they produced buggy browsers because they were careless and
> too much on their minds at the time. Getting them to reasonable
> standards has been a bit like getting North Korea to give up nuclear
> weapon capability.
>
>
>
> > The latest FF and Chrome on PC render the float at the top of the page
> > while IE8 and almost all older browsers render it down a line.
>
> > Any ideas what's going on here?
>
> --
> dorayme

Yes looks good dorayme - The float-left will do the job it seems. The
only problem with this method is that with all the content of parent
element floated, it's height will be 0. In the past I've used a <hr
style="clear:both; visibility:hidden" /> as a workaround for fluid
height elements with floated children. It's not ideal to add extra
markup but it seems to be the best solution. Hopefully IE9 will fall
in line with the latest standards for rendering floats. Fingers
crossed but I'm not holding my breath!

Thanks for the help,
Ciarán

09-25-2009

On Tue, 22 Sep 2009 18:27:55 -0700 (PDT)
Ciaran <> wrote:

[snip]

> In the past, all browsers rendered the floated element down a
> line which meant a negative margin-top would fix the problem but
> the latest version of firefox and chrome (correctly) display the
> floated content on the same line as the rest of the inline stuff.

[snip]

> Look at this in FF and then IE and you'll see what I mean:

[snip]

IE 8 has the ability to display the content in a similar manner as
other current browsers. Compatibility view setting in IE 8 may affect
how IE 8 displays a site.

â€¢ The user may choose to display all intranet sites/websites
in compatibility view and or use a list of websites to
display in compatibility view.

â€¢ The sever may send a X-UA-Compatible header which will also
change the view in IE 8.

â€¢ The author may include and X-UA-Compatible meta tag

--
BootNic Thu Sep 24, 2009 10:23 pm
It's not that some people have willpower and some don't. It's that
some people are ready to change and others are not.
*James Gordon*

â• 291 days remaining

-----BEGIN PGP SIGNATURE-----
Version: GnuPG v2.0.12 (GNU/Linux)

iEYEARECAAYFAkq8KaQACgkQmo2774GZ7qlmeACgtt2p6fJHS9 G+yBV+4oTv6ZGc
0PgAnAvLmIVQX+0DIZbZ3rGtjzFIFANr
=JMgT
-----END PGP SIGNATURE-----

09-28-2009

In article <>,
Ben C <> wrote:

> On 2009-09-23, dorayme <> wrote:
> > In article
> ><45311ca8-1504-48e8-a68c->,
> > cronoklee <> wrote:
....
> > Why is there such a difference in browsers in your original case? Ask
> > Microsoft, they produced buggy browsers because they were careless and
> > too much on their minds at the time. Getting them to reasonable
> > standards has been a bit like getting North Korea to give up nuclear
> > weapon capability.
>
> This was actually a bug-in-common between Firefox and IE. I think the
> correct CSS rules are unnecessarily silly in this case and the spec
> should have been changed to what FF and IE were doing.
>
> But rules are rules. Opera and Konqueror and the most recent FF get it
> right.

I was looking in browsershots at some things on floats about order of
floats and different browsers recently and it seems most modern browsers
are 'following the rules'. I went into this a bit at:

<http://netweaver.com.au/floatHouse/page5.php>

and notice even IE7 getting it wrong. But FF is now caught up as you
say... Also IE8. Looks like I need to spring clean all that stuff and
the appendices with the screenshots to bring it up to date...

It was such a worry a while back the different float treatments across
browsers, enough to drive an author into absolute rag... positioning
which seems a bit more consistent across browsers.

--
dorayme

09-28-2009

In article <>,
Ben C <> wrote:

> I think the
> correct CSS rules are unnecessarily silly in this case and the spec
> should have been changed to what FF and IE were doing.

Come to think of it some more, I am interested in why you say this. In
respect to what sort of case?

My older Camino (Gecko) is the only browser I have now on my Mac that
does what (I think) you think is more sensible for the fourth instance:

<http://dorayme.netweaver.com.au/justPics/floatorderinolderbrowser.png>

for

<http://dorayme.netweaver.com.au/float_order.html>

--
dorayme

09-30-2009

In article <>,
Ben C <> wrote:

> On 2009-09-28, dorayme <> wrote:
> > In article <>,
> > Ben C <> wrote:
> >
> >> I think the
> >> correct CSS rules are unnecessarily silly in this case and the spec
> >> should have been changed to what FF and IE were doing.
> >
> > Come to think of it some more, I am interested in why you say this. In
> > respect to what sort of case?
>
> When the line breaks before the float.
>
> Suppose you've got this:
>
> <div>
> Here is some text <span>float</span>
> </div>
>
> We should see the float on the left and the word "Here" to the right of
> it, aligned with the top of the float. (The span is floated left).
>
> So far so good, but if the line breaks before the word "text" because
> the container is narrow, then everything changes, and we get the line of
> text first and the float below it.
>
> This just seems a bit unintuitive to me. Or maybe I'm just being grouchy
> because I'm going to have to fix this in the browser my day job is
> working on.

I'm still puzzled because this is so unrealistic a case and I am trying
to get a handle on what a realistic case would be and why you find it
unintuitive?

<div>
Here is some text and let's make the sentence longer so we can narrow
.... <img style="float: left; padding: .2em;" src="pics/crimson.png"
alt="">
</div>

First point to note is that in my older Camino, the only quickly
available browser I have that does it different to modern Safari, FF
etc, is that when the browser is not narrowed, a rather unintuitive
result happens, the float is on the next line to the text? Or am I too
used to the modern effect?

Second, when the browser is narrowed, you lose the effect of wrapping
text around the float, carefully placing the float among the text. I
have been thinking this as some sort of common raison d'être for floats.

Anyway, what is important is consistency and from the author's point of
view, a carefully placed floated image in text seems to me to be a more
daunting task with the older browser way.

Perhaps we are thinking different cases?

--
dorayme

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
float to string to float, with first float == second float	Carsten Fuchs	C++	45	10-08-2009 09:47 AM
Forms Authentication - Really really basic question	LW	ASP .Net Security	1	05-02-2007 11:25 AM
Forms Authentication - Really really basic question	=?Utf-8?B?TFc=?=	ASP .Net	8	04-24-2007 11:54 PM
How to float a DIV top right corner of browser?	Michael	Javascript	1	02-20-2006 12:26 AM
Re: float->byte->float is same with original float image. why float->ubyte->float is different???	bd	C Programming	0	07-07-2003 12:09 AM