Have divs "tight fit"

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

I don't know why everyone is saying float:left or display:inline-block; when you said you wanted the div to behave like a span. The correct way to do that is this:

div {
    display: inline;
}

Ignore anyone saying this:

"If you want it to look like a span, use a span tag"

It's not true and that's what CSS is for - describing what content should look like, HTML is for describing what the content is.

I'm sure you have your reasons for choice of tags, and there are probably better ones to choose but it's impossible to say without any actual context. However <div> and <span> have no actual semantic meaning.

Answer 2

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.