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

Span shifts down when float=right

P: 62
Hello All.
I have a weird observation regarding the CSS float style for span.
Allow me to share details before asking my question:
Screen resolution: 1024x768 (I know my monitor is outdated; it can't display higher than this)

Text entered in the left side:
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <body>
  4. <span>This is some text. This is some text.</span><span style="float:right;">Some more text on the right</span>
  5. </body>
  6. </html>
For some reason, Firefox (3.0.1 on WinXP SP3) and IE (6 on WinXP SP3) display the right span on a different line. However, Google chrome ( displays it in the same line as I want it to. There is a note on the w3schools page saying if the text needs more space, it will occupy the next line. But in my case I am sure that the text is not needing more space (I tried creating borders and confirm that the text does not overlap). Even then it shifts down :-(.

Can someone help me with this ? My intent is to display both span elements on the same line.

Thanks in advance,
Parag Doke
Oct 13 '09 #1
Share this Question
Share on Google+
2 Replies

Expert 5K+
P: 7,435
That's because <div> is a block element which automatically takes up the full width of the browser's viewport, in this case. Floating the span removes it from the normal flow of the div but will place it below that.

If you float the div left and set a width, you'll see everything on one line. Why Chrome is not acting the same as Firefox, I don't know (did not test myself).

Do not compare IE6 to Firefox. For that matter, do not compare any version of IE to any other browser. Internet Explorer is almost 12 years behind every other browser in modern standards and practices and the worst browser on the planet. Always, always check with the more modern browsers first to see if your markup is correct. Then look at IE to see if/when it screws things up.
Oct 13 '09 #2

P: 62
Hello drhowarddrfine.
Many thanks for your inputs. I was able to get it work using the following:
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <body>
  3. <div style="float: left;">This is some text. This is some text.</div><div style="float:right;">Some more text on the right</div>
  4. </body>
  5. </html>
Parag Doke
Oct 14 '09 #3

Post your reply

Sign in to post your reply or Sign up for a free account.