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

Question

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

In one of the columns, I have a div that contains three elements, as well as a snap and two spans - each range for displaying a 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 the icons to move to the right (perfectly lined up between the table elements in the same column).

My problem is that when I add a float: directly to the gaps, it moves them to the right, but also down and extends the height of the div.

After adding float: right:

How can I keep the icons in the same vertical position as before, with the correct movement of the elements? (I tried the position: absolute and clear: both).

Answer 1

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

According to this answer , which I found elsewhere in StackOverflow, the elements that you want to have correctly must first be specified 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 error gave me all kinds of problems on my own website, but as soon as I found out about it, I realized that it is actually quite simple to understand the fix. When you put float: the right element after everything else, then it will float right just like you requested. But if there is not enough space to the right (or if some browser quirk makes it a reason for not enough space), then this element will also be pushed away, so the browser is satisfied that it will do. But if you put float: right element first, then it will go where it should before the browser selects any other elements. Then, those who do not have a float: are inserted correctly according to their usual layout, including setting an automatic width or an automatic field to accommodate floating elements.

This did not happen when I tested this, but this configuration can still lead to both of them being on top of each other, even if they are not initially shifted from the starting position, but if that happens try adding a display: built-in unit in the following way:

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

See this JSFiddle for an example of how it works with gaps placed in front of the anchor.

Answer 2

Perhaps you should post all the code because float right should not do this. See codepen: http://codepen.io/mbrillaud/pen/myKjPO

 .my-fixed-width{ width:200px; background-color: orange; } .icon{ float: right; } 

If you want to use position: absolute, do not forget to set the parent to position: relative, for example: http://codepen.io/mbrillaud/pen/jEKpqx

 .my-fixed-width{ position: relative; width:200px; background-color: orange; } .icon{ position: absolute; right: 0; top: 0; } 

Answer 3

if it drops when you don't want it, then just add "Margin-top: - (###) px;" to CSS