Question

Please see http://jsfiddle.net/jaWjB/1/

The line break happens in between the second image and its label. I want to make any <span class="group"> element behave like an incompressible block, so that the line breaks will happen in between the blocks but not within them.

This would mean the above fiddle would be laid out as

[img]label
[img]label

instead of

[img]label[img]
label

but, if there is enough width available, it should display like this

[img]label[img]label

At the moment I can only do this with tables. Is there another way?

Answer 1

Add this in your css

Edited so that they are inline with enough width

p {
width: 10ex;
border: thin solid red;
display:inline;
}
​span{
display:inline-block;
}​