12

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>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Guerrilla
  • 13,375
  • 31
  • 109
  • 210
  • 1
    you can check the docs about span here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span and a difference between inline and block elements here: https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements – Edwin May 08 '18 at 13:19

1 Answers1

14

If you check the documentation 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:

enter image description here

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 span 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 them 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>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • @Alohci I updated with better wording and the correct spec link, hope it's more clear now ;) – Temani Afif May 08 '18 at 14:04
  • Yes, much improved. You may also want for completeness to point out that the outer div's height is the sum of the line-boxes' heights that it contains. I'll delete my earlier comments. – Alohci May 08 '18 at 14:16
  • @Alohci it's not really the sum .. if we have many line-boxes it will be the max line-height if we are still in the same line and it's additif when there is a line break – Temani Afif May 08 '18 at 14:19
  • I disagree. I *think* you are confusing line-boxes and inline-boxes. Each line box contains one or more inline-boxes which are vertically aligned with each other. The height of the line box is not the max line-height of the inline boxes, but the distance between the top of the highest most box's line-height and the bottom of the lowest most box's line-height, taking into account vertical alignment and including the strut. The next line box starts immediately below that one, so the content box of the IFC containing block is exactly the height of the stack of line boxes that it forms. – Alohci May 08 '18 at 14:36
  • @Alohci yes when it comes to meticulous wording and specification am confused :/ ... all is clear in my mind [I hope so !] but I scramble sometimes the words and since english isn't my native language, it's even worse :s ... by the way feel free to edit and improve the answer ;) – Temani Afif May 08 '18 at 14:43