In a scenario where two elements have the same value of float:right;, which element will take priority?

Question

In a scenario where two elements have the same value of float:right;, which element will take priority?

When I have two div elements with similar parent location and both positioned float:right using the style attribute, how can I determine which one will appear more to the right than the other? I want to ensure that div1 is always the furthest right, followed by div2. Or vice versa, but this order needs to be consistent.

Thanks. UPD: I don't want to rely on the order of the divs in the HTML page. Since my HTML pages are generated from Java/JSP, I cannot guarantee the order in which the divs will be written. Is there an alternative solution available?

html css

Answer 1

Answer №1

As per the CSS standards, the first floated element in the code will be positioned to the right, followed by the second one.

If there isn't enough space on the line, the second floated element will appear below the first one.

For more information, please visit: http://www.w3.org/TR/CSS21/visuren.html#floats

Additionally, consider 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

As per the CSS standards, the first floated element in the code will be positioned to the right, followed by the second one.

If there isn't enough space on the line, the second floated element will appear below the first one.

For more information, please visit: http://www.w3.org/TR/CSS21/visuren.html#floats

Additionally, consider 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 3

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 element that appears first in the code will be positioned further to the right.

Update: included a code snippet as well.

Answer 4

.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 element that appears first in the code will be positioned further to the right.

Update: included a code snippet as well.

Answer 5

Answer №3

The first one seems to be more accurate.

<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>

Check out the jsfiddle link for a live demo: http://jsfiddle.net/q6wnm4dv/

Answer 6

The first one seems to be more accurate.

<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>

Check out the jsfiddle link for a live demo: http://jsfiddle.net/q6wnm4dv/

Answer 7

Answer №4

The element that appears first in the HTML code will be positioned on 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;
}

You can view a live example here: https://jsfiddle.net/mgjdjf62/

To efficiently organize items, consider using flexbox: a guide to flexbox

Answer 8

The element that appears first in the HTML code will be positioned on 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;
}

You can view a live example here: https://jsfiddle.net/mgjdjf62/

To efficiently organize items, consider using flexbox: a guide to flexbox

In a scenario where two elements have the same value of float:right;, which element will take priority?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The attempt to remove the ajax-loaded page while preserving the original div is proving to be

Ways to alter the color of the <div> Element based on its height or width?

What could be causing my click() function to only work properly after resizing?

The Material UI button feature neglects to account for custom CSS styles when attempting to override the default settings

Build a custom HTML interface for accessing a CXF REST API utilizing @HeaderParam annotation and List<Attachment> functionality

The rendering of HTML DOM is being obstructed on iPhone devices running iOS 13

iOS 8 home screen web apps with status bar overlay and footer bar integration

If you click outside of a Div element, the Div element will close

Having trouble with your jQuery animation on a div?

What could be the reason my JavaScript alert is not functioning properly?

Creating easy and efficient forms using Bootstrap

Tips for verifying blank form fields

What is the method for passing an element in Angular2 Typescript binding?

Regular expression to limit a string to a maximum of 5 consecutive numeric characters and a total of up to 8 numeric characters

Attempting to utilize media queries in order to create a responsive header image

What causes manual input rendered in Django Template to be omitted from form submission?

Creating a dynamic select box that changes based on data in Angular

Failure in the application of CSS styles to HTML

Steps to create a fixed pattern background image with a customizable background color based on the content within a div element

What causes the timer to pause, and what steps can be taken to avoid it? (Using Javascript with Iframe)