Question

This is the structure of my HTML:

<div> <span>Some text</span> <br/> <span>Not much text</span> </div>
<div> <span>Some text</span> <br/> <span>Not much text</span> </div>
<div> <span>Some text</span> <br/> <span>Not much text</span> </div>

I have three divs all of which contain 2 spans with not much text. I want all three divs to appear on the same line. At the moment, each div takes up the whole width of a new line.

I don’t want to hardcode a width. I would much prefer if the divs behaved like spans in the sense the they have a “tight fit” for their content (no whitespace).

Answer 1

The easiest way would be to apply float left to the div so that they sit inline. Or, you could apply display:inline-block to the div, but that would only work in IE8+.

But I have to ask the question, why do you need the div tag initially? it seems like you are creating more work for yourself here.

I would prefer to start with an inline element such as a span, then apply display:inline-block for padding, margin’s if needed.