Can you float to the right of a span?

  • A+
Category:Languages

In below code I want up and down to float to right of the red line but they float past it to the div.

Why is this?

#outer {   margin-top: 50px;   margin-left: 50px;   width: 300px;   border: 1px solid lightgrey; }  .inner {   border: 1px solid red;   padding: 15px 80px 15px 40px;   position: relative; }  .up, .down {   border: 1px solid #000;   float: right; }  .down {   clear: both; }
<div id="outer">   <span class="inner">     <span class="quantity">Quantity</span>     <span class="up">up</span>     <span class="down">down</span>   </span> </div>


If you check the documenation you will read this:

As float implies the use of the block layout, it modifies the computed value of the display values, in some cases:

Can you float to the right of a span?

Which means that your floated span become block elements inside an inline element that breaks your layout.

You can also notice that padding-top/padding-bottom and border-top/border-bottom doesn't affect the height of the outer div. This is because only the line-height is used when calculating the height of the line boxref; thus the height of the outer div is equal to the height of the line box. (you may increase the line-height to see the difference)

In order to fix both issues, you can change the display of the inner to inline-block:

#outer {   margin-top: 50px;   margin-left: 50px;   width: 300px;   border: 1px solid lightgrey; }  .inner {   border: 1px solid red;   padding: 15px 0 15px 40px; /*remove padding-right to have the close to the red line*/    position: relative;   display:inline-block; }  .up, .down {   border: 1px solid #000;   float: right; }  .down {   clear: both; }
<div id="outer">   <span class="inner">     <span class="quantity">Quantity</span>     <span class="up">up</span>     <span class="down">down</span>   </span> </div>

Comment

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: