Why is the floating range falling?

This code works fine in Webkit (chrome), but not in firefox, where the second range will fall, do you know why?

<div id="sbar"> <span id="status">Some Text</span> <span id="mlog" style="float: right;">Some text in the right</span> </div> 
+4
source share
5 answers

Try changing two spaces.

 <div id="sbar"> <span id="mlog" style="float: right;">Some text in the right</span> <span id="status">Some Text</span> </div> 
+5
source

Yes ... reversing makes it work with floats, you need to arrange your elements like a stack that the browser can pick up -

so when swimming on the left

A

IN

WITH

will swim until ABC -

A

AB

Abc

when all floaters on the right will give you a CBA, as in

A

B.

CBA

I saw how this is implemented in firefox, did not check webkit. However, you can be safe.

+1
source

This code works fine in webkit (chrome) but not in firefox

WebKit is wrong. The standard states that the right float should go down.

See CSS for an explanation : the problem with three layout columns .

+1
source

This code works fine in Webkit (chrome), but not in firefox, where the second failure goes down, do you know why?

Yes. The behavior of a floating-point element will fall below the non-floating element that precedes it in the code. Others have already fixed the fixes.

+1
source

May offer another solution without reverse. It works in different browsers.

 <div id="sbar" style="position:relative;"> <span id="status">Some Text</span> <span id="mlog" style="position:absolute; top:0;right:0;">Some text in the right</span> </div> 
+1
source

All Articles