CODEWITHSUNDEEP
htmlcsscss-float
Morgan Cheng
Morgan Cheng

Reputation: 76008

What's the standard behavior of float:right following float:left?

Suppose there is such HTML tags:

​<span>
  <span id='s1'>Text 1</span>
  <span id='s2'>Text 2</span>
</span>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

And the css style is:

​#s1 {
  float: left;
}
#s2 {
  float: right;
}

What is the standard behavior of the display?

In some browser, I see

Text 1 Text 2

In some version of IE, I see

Text 1

         Text 2

It seems the float:right span is pushed down to next line.

Upvotes: 5

Views: 178

Answers (2)

Ender
Ender

Reputation: 15221

By default, <span> is an inline element. With the exact markup that you have provided, all browsers SHOULD be displaying those two on the same line, unless the computed width of the two <span>s combined is greater than the length of the current line.

Upvotes: 0

meder omuraliev
meder omuraliev

Reputation: 186562

Modern browsers would properly calculate the width of the shrinkwrapped floats and make them be in the same line, provided the widths of the floats dont exceed the parent elements width. I believe this is the correct behaviour for rendering.

Internet Explorer ( 5, 6, 7 ) won't render them the same way because it's incapable of calculating the width of the shrinkwrapped float, so it'll push it down onto the next line unless you explicitly define the width.

Upvotes: 4

Related Questions