HTML Float Right Element Order

HTML float right element order

That 'inverted order' is the intended result.

You can dig around in the CSS Specification if you'd like, but your example renders as it ought to.

If you'd like them to display in the same order as the markup, float the .container right, its children left.

Updated jsfiddle

Horizontal menu: how to float right but keep the menu items in the correct order?

Remove float:right from li which prevent the reverse order.

Add float:right to the ul's .dropdown class which put your entire menu at right side.

Add float:left to the li which helps your sub-menu to stay align.

.drop_menu {
    float: right;  
}
.drop_menu li { 
    display: table-cell;
    vertical-align: middle;
    float:left;
}

Js Fiddle Demo

Float left vs float right - why does the order change?

If they are both left, the image is pushed left first then the text is pushed left like you said. This is the same for the right. The image is pushed all the way to the right, and then the text is pushed to the right, basically bumping into the image.

The first item gets pushed in it's respective direction first, then the second item follows. You are basically just reversing the direction when you change the float to right. They move individually in the direction of the float in the order that they are laid out in the CSS but do not pass each other.

float:right in the correct order it appears in HTML code

You can use flexbox and justify-content: flex-end;

.container {  background: #eee;  width: 50%;  display: flex;  justify-content: flex-end;}

<div class="container">                  <div class="a">a</div>   <div class="b">b</div></div>

Float:right reverses order of spans

The general solution to this problem is either to reverse the order of the right floated elements in the HTML, or wrap them in a containing element and float that to the right instead.

Float: right is messing up the order

In order to avoid the "order mess" instead of float: right use the combination of display: inline-block and text-align: right.

I also changed your duplicated IDs to class names.

body{color:white;}
.wrap{margin-top:10px;overflow:hidden;}
.container{float:right;background:#121212;max-width:250px;padding:5px;overflow:hidden;padding:5px 5px 0 0;}
.img_c{height:50px;overflow:hidden;margin:0 0 5px 5px;display: inline-block; /* here's the trick */}
.img_c img{max-width:100%;max-height:100%;}
.cl{text-align:left;}
.cr{text-align:right; /*no more weird behavior!!*/}

<div class="wrap cl"><div class="container">
<p>Float:left</p>
<div class="img_c l"><img src="https://i.postimg.cc/3NgXgXkD/0001.jpg"></div>
<div class="img_c l"><img src="https://i.postimg.cc/h4x1WB2P/0002.jpg"></div>
<div class="img_c l"><img src="https://i.postimg.cc/FRkgK5mp/0003.jpg"></div>
<div class="img_c l"><img src="https://i.postimg.cc/kGrN61gm/0004.jpg"></div>
<div class="img_c l"><img src="https://i.postimg.cc/VvcMLJKs/0005.jpg"></div>
<div class="img_c l"><img src="https://i.postimg.cc/FzgSfh6y/0006.jpg"></div>
<div class="img_c l"><img src="https://i.postimg.cc/MTBVS7br/0007.jpg"></div>
<div class="img_c l"><img src="https://i.postimg.cc/WpMgY74d/0008.jpg"></div>
</div></div>
<div class="wrap cr"><div class="container">
<p>Float:right</p>
<div class="img_c r"><img src="https://i.postimg.cc/3NgXgXkD/0001.jpg"></div>
<div class="img_c r"><img src="https://i.postimg.cc/h4x1WB2P/0002.jpg"></div>
<div class="img_c r"><img src="https://i.postimg.cc/FRkgK5mp/0003.jpg"></div>
<div class="img_c r"><img src="https://i.postimg.cc/kGrN61gm/0004.jpg"></div>
<div class="img_c r"><img src="https://i.postimg.cc/VvcMLJKs/0005.jpg"></div>
<div class="img_c r"><img src="https://i.postimg.cc/FzgSfh6y/0006.jpg"></div>
<div class="img_c r"><img src="https://i.postimg.cc/MTBVS7br/0007.jpg"></div>
<div class="img_c r"><img src="https://i.postimg.cc/WpMgY74d/0008.jpg"></div>
</div>

How to float two elements to the right maintaining the same order visually and semantically?

The common fixes are:

Adding auxiliary element

<style>
.container { width: 200px; height: 50px; background: #333; }
.container p { width: 50px; height: 50px; background: #f00; float: left; margin: 0; }
.container .aux { float: right; }
</style>
<div class="container">
    <div class="aux">
        <p class="a">Simon</p>
        <p class="b">Says</p>
    </div>
</div>

http://jsbin.com/eravan/6/edit

The problem with this approach is the redundant auxiliary element itself.

Messing with the semantics

<style>
.container { width: 200px; height: 50px; background: #333; }
.container p { width: 50px; height: 50px; background: #f00; float: right; margin: 0; }
</style>
<div class="container">
    <p class="b">Says</p>
    <p class="a">Simon</p>
</div>

http://jsbin.com/eravan/9/edit

This is the worst solution and, unfortunately, the most common as well (Ali Bassam comment directly below proves it).

Neither of these is the correct answer.

order of buttons changes when floating right. how to fix that?

You could make a container around the 2 buttons and let the container float to the right.

.btn{    float: left;    padding: 1.7em;    text-align: center;    display: inline-block;    border: none;    cursor: pointer;    color: white; }.navbar{    float: left;    background-color: #47476b;}.btnff{    -webkit-transition-duration: 0.7s;    transition-delay: 0.1s;}.btnff:hover{    background-color: black;}.active{    background-color: limegreen;}.float-container{    float: right;}

        <div>            <button class="btn btnff navbar active" type="submit">Button 1</button>            <button class="btn btnff navbar" type="submit">Button 2</button>            <button class="btn btnff navbar" type="submit">Button 3</button>            <button class="btn btnff navbar" type="submit">Button 4</button>            <button class="btn btnff navbar" type="submit">Button 5</button>            <button class="btn btnff navbar" type="submit">Button 6</button>            <button class="btn btnff navbar" type="submit">Button 7</button>            <div class="float-container">                <button class="btn btnff navbar" type="submit">Button 8</button>                <button class="btn btnff navbar" type="submit">Button 9</button>            </div>        </div>

how to float right while keeping elements in proper order?

Remvoe your float from Nav A

nav a{
    display:inline-block;

    color:white;
    margin-left:10px;
    font-size:12px;
    text-decoration: none;
    font-weight:100;
    letter-spacing: -1px;
}

http://jsfiddle.net/xdJdv/

---

Related Topics