Float some text to the right of div

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.

Can you clarify if you need the text to be inside the blue or outside the blue? Which specific text/code block do you want to see there? — Huangism, Aug 14 '13 at 14:26
@nomicos I updated my answer, you can see the solution for your new question — Mr. Alien, Aug 14 '13 at 14:47

score 1 · Accepted Answer · edited May 23 '17 at 12:11

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

You should note that the `nth-of-type` pseudo selector isn't supported in IE8 and below. — Axel, Aug 14 '13 at 14:33
@nomicos You would be knowing in which order the li has to be aligned or is it dynamic? also last-child won't align all the li but only last li, http://jsfiddle.net/9GGLE/4/ — Mr. Alien, Aug 14 '13 at 14:37

score 0 · Answer 2 · answered Aug 14 '13 at 14:25

0

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/

answered Aug 14 '13 at 14:25

umbriel

723
1
7
22

score 0 · Answer 3 · answered Aug 14 '13 at 14:39

0

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 */ }

answered Aug 14 '13 at 14:39

Scottux

1,577
1
11
22

Float some text to the right of div

3 Answers3