make element take up the space of a block, but render as inline

Question

Here is an example of what I'm working with. http://jsfiddle.net/5J4PE/

I want the red and greed boxes to show up wrapped tightly around the text (like it is when using inline-block).

However, I want it to take up the space like when using block, such that the boxes appear stacked instead of in a line.

I don't want them to be the same width, so I don't want to use table-cell or any of the table displays.

I could just add a <br/> between the elements, but I was wondering if there was a way to do this in CSS.

Answer 1

you could use a span around the text & then set bg Color in css

<div><span class="red">hello</span></div>

then additionally you may use whatever styles on the outer divs.

Answer 2

It's just as nasty as <br /> tags, but float: left; clear: left; on all elements would get you the effect you want. Pick your poison?

Obviously you'd lose some of the layout flow with the floats, so you'd need to adjust your parent to account for that.

Answer 3

Have you tried using the before: or after: pseudo-classes? These allow you to add content before or after a block, using CSS.

eg <span>Hello</span> styled with span:after {content:" world";} will produce Hello world in the browser.

If you specify a line-feed, it should put a blank line at the end of your block. Note: You'll need to specify it using the unicode value of the line-feed character.

Hope that helps.