1

Why are these two lines "First text" and "Second text" not on the same line?

<html>
    <body style="width: 20px;">
        <div style="width: auto; display: block; white-space: nowrap;">
            <div style="display: inline-block; float: left;">First text</div>
            <div style="display: inline-block; float: left;">Second text</div>
        </div>
    </body>
</html>
N8888
  • 670
  • 2
  • 14
  • 20
Radoslav
  • 85
  • 2
  • 9

3 Answers3

4

Because you are floating the element.

Remove the float: left;, or make it display: block;

See also: Difference Between 'display: block; float: left' vs. 'display: inline-block; float: left'?

<html>
    <body style="width: 20px;">
        <div style="width: auto; display: block; white-space: nowrap;">
            <div style="display: inline-block;">First text</div>
            <div style="display: inline-block;">Second text</div>
        </div>
    </body>
</html>
caiovisk
  • 3,667
  • 1
  • 12
  • 18
3

float: left cancels out the display: inline

<html>
    <body style="width: 20px;">
        <div style="width: auto; display: block; white-space: nowrap;">
            <div style="display: inline-block;">First text</div>
            <div style="display: inline-block;">Second text</div>
        </div>
    </body>
</html>
Domenik Reitzner
  • 1,583
  • 1
  • 12
  • 21
0

use float:none with display: inline-block

Me1o
  • 1,629
  • 1
  • 6
  • 8