CSS float right moves element right and down (I don't want down).

Question

I have a table (bootstrap themed, generated from Django admin).

In one of the columns I have a div, which contains three elements, and anchor and two spans - each span to display bootstrap glyphicon.

<div class="my-fixed-width under-review data-sent-false">
    <a href="myobjectview/789/" style="inline-block;">C4U0UACXX-8 6nb</a>&nbsp;
    <span class="glyphicon glyphicon-asterisk" style="color:blue"></span>
    <span class="glyphicon glyphicon-pause" style="color:darkgray"></span>
</div>

I would like to have the icons moved to the right (ideally lined up between table elements in the same column).

My problem is that when I add float:right to the spans, it moves them right, but also down and expands the div height.

After the float:right is added :

How can I keep the icons at the same vertical position as before, while moving the elements right? (I have tried position:absolute, and clear:both).

Answer 1

This question has been here a while, but I found a good answer so I want to share.

According to this answer I found elsewhere on StackOverflow, the elements that you want to have floated right need to be given first in your html structure.

<div class="my-fixed-width under-review data-sent-false">
    <span class="glyphicon glyphicon-asterisk" style="color:blue"></span>
    <span class="glyphicon glyphicon-pause" style="color:darkgray"></span>
    <a href="myobjectview/789/" style="inline-block;">C4U0UACXX-8 6nb</a>&nbsp;
</div>

This bug was giving me all sorts of trouble on my own website, but once I found this out I realized that it's actually quite simple to understand the fix. When you put a float:right element after everything else, then it will float to the right just like you asked it to. But if there's not enough room to the right (or if some quirk of browser rendering makes it think there's not enough room) then that element gets pushed down as well, so the browser is satisfied that it will fit. But if you put the float:right element first, then it goes right where it's supposed to before the browser lays out any other elements. Then the ones without float:right get put in according to their usual layout, including adjusting auto-widths or auto-margins to accommodate floated elements.

It didn't happen when I was testing this, but this configuration might still cause both of them to be on top of each other even if they're not initially pushed down from their original position, but if that happens try adding the display:inline-block like this:

span.glyphicon{
    float:right;
    display:inline-block;
}

See this JSFiddle on an example of it working with the spans placed before the anchor.

Answer 2

if it goes down when you don't want it to then simply add a "Margin-top: -(###)px;" to the CSS