Float some text to the right of div - html

Question

I want to place some text to the right of blue ribbon so that it would be on the same line with already existing elements. All my attempts to try doing that causes text occuring on the next line.
What can you recommend?
Here is the code: (JSFiddle)
HTML
<div id='ribbon'>
<ul id='topMenu'>
<li>Thing one</li>
<li>Thing two</li>
<li>Thing three</li>
</ul>
</div>
CSS
#topMenu {
height: 35px;
margin: 0; padding: 0;
}
#topMenu a {
color: black;
}
#topMenu li {
padding: 0 10px 0 10px;
float: left;
list-style-type: none;
}
#topMenu li:hover {
color: white;
background-color: #00D0FF;
}
UPD: But if I need that text not to be <li> element? I mean, not to use general <li> stylesheet.

Answer 1

You can use nth-of-type pseudo and float the elements to the right, for example
#topMenu li:nth-of-type(2), #topMenu li:nth-of-type(3) {
float: right;
}
Demo
Or you can simply use
#topMenu li:last-child {
float: right;
}
To shift the last li to the right. Also make sure you clear your floating elements nested inside ul, you can use a self clearing class like -
.clear_self:after {
content: "";
display: table;
clear: both;
}
So that it doesn't mess up your document flow. Just call that class on the ul element, i.e container element holding floated elements.
Also, you can alternative call classes on the li element which you want to float to the right of the ribbon, but incase if you don't want to increase your markup, you can use pseudo here..
As per your update
Demo 2
Explanation: Float your entire ul element to the left, and this will create an empty space on the right, so that the next div will shift to right cuz we are using float: right;, also make sure you clear your floating elements, else, the next div will sit right in the empty space, for more info on clearing floats, you can read my answer here..

Answer 2

Check out my fiddle. You needed to add float right to the last li. I separated it with a class of .last
#topMenu li.last{float:right;}
http://jsfiddle.net/9GGLE/2/

Answer 3

If you are trying to float another element, sibling of #ribbon, you can check out this jsFiddle
.floated { float:right; margin-top:-30px; /* this is to overcome height+padding of the ribbon */ }