Float:Right Reverses Order of Spans

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.

Why menu created with ul li elements displayed in reverse order?

You should float only the ul right. The list items should be floated left in the correct (expected) order:

.header ul {
    float:right;
}

// expected order. It's the default value if not overriden,
// therefore it is not realy needed
.header li
{
    float:left;
}

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 right on 2 span items in the h1 block

First of all, using float is not using the benefits of CSS3, it was there long before. Next to that, using a h2 element for a title is okay, but in this example, it's not semantically correct to use a heading element since it's more than just a title that you are showing.

Using display: flex; and margin-left: auto; on the right element, it will always show most far to the right of the available space (see below example). You could also use justify-content: space-between; to do this. Please read more about it at MDN.

The datetime attribute I added to make the time machine-readable.

.heading {  display: flex;}
.sunset {  margin-left: auto;}

<div class="heading">  <div class="sunrise">    <time datetime="17:01">17.01</time>  </div>  <div class="sunset">    <time datetime="17:11">17.11</time>  </div></div>

Float right doesn't work right in CSS

The CSS float property was never designed for building layouts.

It was designed for wrapping text around images.

Because CSS didn't offer a better layout system, floats (and tables, inline-block and absolute positioning) have been used as hack workarounds.

But now that CSS3 flex and grid modules have wide browser support, and they are specifically designed for building layouts, you should consider using them.

section {  display: flex;}
section > * {  margin: 0;  align-self: center;  /* 1 */}
section > p {  margin-right: auto;  /* 2 */}
.green-dot {  color: #20b08f;  font-size: 1.5rem;}
.gray-dot {  color: grey;  font-size: 1.5rem;}

<article class="professional-skills">
  <h2>Professional Skills</h2>
  <section>    <p>Web Design</p>    <span class="green-dot">●</span>    <span class="green-dot">●</span>    <span class="green-dot">●</span>    <span class="green-dot">●</span>    <span class="green-dot">●</span>  </section>
  <section>    <p>Design</p>    <span class="green-dot">●</span>    <span class="green-dot">●</span>    <span class="green-dot">●</span>    <span class="gray-dot">●</span>    <span class="gray-dot">●</span>  </section>
</article>

CSS float right without changing order?

Try adding additional container

HTML

<div id="topnav"><div class="cont"><ul class="topnavlinks"><li class="menu-474 first"><a href="/" title="Home page">Home</a></li>
 <li class="menu-540 active-trail active"><a href="/our-company" title="" class="active">Our company</a></li>
 <li class="menu-541"><a href="/news_blog" title="">Blog</a></li>
 <li class="menu-930"><a href="/faq" title="Frequently Asked Questions">FAQ</a></li>
 <li class="menu-900 last"><a href="/contact" title="Contact">Contact</a></li>
</ul></div></div>

CSS

.cont { width:980px; margin:0px auto; }
#topnav { width:100%; height:14px; background:#b8b8b8; border-bottom:1px solid #989898; }
.topnavlinks ul { float:right;  }
.topnavlinks li { float:left;  }
.topnavlinks a { color:#fff; text-decoration:none; padding:0px 27px; }

Ordering Nav list items when using float right

Flexbox can do that..quite simply:

ul {  list-style-type: none;  display: flex;  justify-content: flex-end;  flex-wrap:wrap;}
a {  text-decoration: none;  padding:.25em;  border:1px solid grey;  display:block;}

<ul>  <li><a href="#">Menu Item 1</a></li>  <li><a href="#">Menu Item 2</a></li>  <li><a href="#">Menu Item 3</a></li>  <li><a href="#">Menu Item 4</a></li>  <li><a href="#">Menu Item 5</a></li>  <li><a href="#">Menu Item 6</a></li>  <li><a href="#">Menu Item 7</a></li>  <li><a href="#">Menu Item 8</a></li>  <li><a href="#">Menu Item 9</a></li></ul>

Float:Right Reverses Order of Spans