two elements with same value: float:right; Which one take precedence? - html

Question

If I have two div elements. Both have similar parent location and float:right the style attribute. Which one will be more right than the other? I'd like to be able to tell that div1 should be most right, and div2 follows the div1. Or other way around, but this order must be deterministic.
thanks.
UPD: I'd like not to rely on the order of the divs in the html page. My html page gots generated from java/jsp, so i cannot be absolutely sure which div will be generated and written first. Is there another solution?

Answer 1

According to the CSS specification, the first floated element that appears in the code will be placed to the right, followed by the second one.
If there is not enough room on the line, then the second floated element will appear below the first one.
Reference: http://www.w3.org/TR/CSS21/visuren.html#floats
Also, be aware of block-formatting contexts:
http://www.w3.org/TR/CSS21/visuren.html#block-formatting
p {
overflow: auto; /* this creates a block formatting context */
}
img {
float: right;
}
<p>
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x200">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer facilisis velit ut neque tempor quis cursus tortor suscipit. Curabitur rutrum magna vitae arcu pharetra eget cursus ante accumsan. Nunc commodo malesuada adipiscing. Pellentesque consequat laoreet sagittis. Sed sit amet erat augue. Morbi consectetur, elit quis iaculis cursus, mauris nulla hendrerit augue, ut faucibus elit sapien vitae justo. In a ipsum malesuada nulla rutrum luctus. Donec a enim sapien. Sed ultrices ligula ac neque vulputate luctus. Suspendisse pretium pretium felis, in aliquet risus fringilla at. Nunc cursus sagittis commodo.</p>
<p>
<img src="http://placehold.it/700x100">
<img src="http://placehold.it/100x200">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer facilisis velit ut neque tempor quis cursus tortor suscipit. Curabitur rutrum magna vitae arcu pharetra eget cursus ante accumsan. Nunc commodo malesuada adipiscing. Pellentesque consequat laoreet sagittis. Sed sit amet erat augue. Morbi consectetur, elit quis iaculis cursus, mauris nulla hendrerit augue, ut faucibus elit sapien vitae justo. In a ipsum malesuada nulla rutrum luctus. Donec a enim sapien. Sed ultrices ligula ac neque vulputate luctus. Suspendisse pretium pretium felis, in aliquet risus fringilla at. Nunc cursus sagittis commodo.</p>

Answer 2

.right {
background: green;
}
.right-too {
background: red;
}
div {
float: right;
height: 20px;
width: 100px;
}
<div class="right">RIGHT</div>
<div class="right-too">RIGHT TOO</div>
The one to appear first in the code will be further on the right.
Edit: added a snippet

Answer 3

First one is more right..
<div style='width: 600px; height: 200px; border: 1px solid black;'>
<div style='width: 200px; height: 100px; background-color: yellow; float: right;'>A</div>
<div style='width: 200px; height: 100px; background-color: green; float: right;'>B</div>
</div>
Here is the jsfiddle: http://jsfiddle.net/q6wnm4dv/

Answer 4

The first one you write in the HTML will be the first one from the right side.
HTML:
<div class="wrapper">
<div class="div1"></div>
<div class="div2"></div>
</div>
CSS:
.wrapper {
width: 100%;
height: 50px;
}
.div1 {
float: right;
background-color: red;
height: 50px;
width: 50px;
}
.div2 {
float: right;
background-color: blue;
height: 50px;
width: 50px;
}
Here you can see the working example: https://jsfiddle.net/mgjdjf62/
the best way to order items is to use flexbox: a guide to flexbox