How to display <div> inline surrounded with text?

Question

I would like to display a <div> element inline so that it is surrounded with text.

My code is:

<span>Here is some <div class="a"></div> text</span>

Let's say, the class "a" is defined as below:

.a {
    width:20px;
    height:20px;
    background-color:#f00;
}

The result should be like this:

Is it doable? Thank you for any suggestions.

Solution 1

There's a CSS property display: inline-block; but I don't know how compatible with browsers it is (works fine in my FF)

I'll do some quick testing for you.

Update

I've tested it in Chrome, FF and IE. Works in IE8, not IE7. Chrome is fine as is FF

Solution 2

Basically just add display: inline-block; You might want to tune it a bit afterward, but this should work everywhere except IE6

Comments

[Flipke]

Works in safari, chrome, opera, FF, IE8, won't work in IE6/IE7 though

[oezi]

inline-block doesn't work (or doesn't work correct) in IE6/7, but theres a hack for that if you have to support them: homepage.ntlworld.com/spartanicus/…