How does floating an element affect its height/display?

Question

This is an error that I found today and was bugging me for a while. I finally solved it, but I was curious about how or why this happens, and to know if there is a better solution (I am sure there is):

I created a menu using an unordered list, and for some of the list items I want to display a counter (in the form of a red bubble with a white number inside) on the right side of them.

After coding for a bit, I got the red bubble next to the link name, but when I floated it to the right, the bubble expanded occupying 100% of the parent's height and actually affecting its height (uncomment /*float:right;*/ in the code below to see it). Shouldn't the red bubble just float to the right while keeping its aspect? It looks like display:inline-block or height:100% (or both) are being applied.

I tried setting display and height with different values and !important but nothing seemed to work. I finally fixed the issue by adding line-height:16px and adding a margin-top:10px . But I am not a big fan of this solution as it depends on the height of the menu that could change in the future (I doubt it, but it could happen). Is there a better solution to do this?

You can see the code here: (and on this link http://jsfiddle.net/9nw2zu7y/ )

 * { border: 0px; margin: 0px; padding: 0px; } #menu { background: #555566; position: relative; width: 200px; } #menu li { display: block; min-height: 36px; line-height: 36px; } #menu a { color: #ffffff; text-decoration: none; display: block; padding: 0px 10px; border-top: 1px dotted #5c5c6d; position: relative; overflow: hidden; } #menu a.counter:after, #menu a span.counter { content: attr(data-count); background: red; color: white; font-size: 12px; padding: 2px 5px; border-radius: 50%; /*float:right;*/ } 

 <ul id="menu"> <li><a href="#">List Item 1</a> </li> <li> <a href="#">List Item 2</a> <ul> <li><a href="#">SubList Item 1<span class="counter" data-count="2">1</span></a> </li> <li><a href="#">SubList Item 2</a> </li> <li class="last"><a href="#" class="counter" data-count="2">SubList Item 3</a> </li> </ul> </li> <li><a href="#">List Item 3</a> </li> <li><a href="#">List Item 4</a> </li> </ul> 

Answer 1

When you make an inline element float, it also becomes display:block according to the table at CSS 2.1 Section 9.7 .

A block element's height is, if it doesn't have an explicit height/min-height/max-height specified, the total height of the stack of line boxes it contains, in this case, one line with the counter value in it.

The line box's height is (at least) the height of the line-height value which inherits, making the element the height of the containing line-height. So your adjustment to the line-height to correct for that is legitimate.

The alternative is to separate the counter element into inner and outer elements, floating the outer element and adding the red circle styling to the inner element, which can then remain display:inline .

Answer 2

I hate floating things in this situation. In my opinion, the only thing floats are useful for nowadays for the most part are grid systems (which will be replaced by flex box implementations eventually).

The way I would do this (probably just personal preference) is with position ing.

The following is a semi-pseudo code (just the crux of it) implementation of how to do it with relative and absolute positioning

<li><a href="#">SubList Item 1<span class="counter" data-count="2">1</span></a></li>

li a { display: inline-block; position: relative; padding-right: 5px; }
li a span.counter { position: absolute; left: 100%; top:0; }

Answer 3

The answare is because span is an inline element. The solution is add an height reset (limit) into the css like this:

#menu a span.counter {
  content: attr(data-count);
  background: red;
  color: white;
  font-size: 12px;
  padding: 2px 5px;
  border-radius: 50%;
  float:right;
  display: inline-block;
  line-height: 1;
}