Alternative to divs with background-image set?

[green_meep]

Hey all,

I'm trying to insert symbols on a webpage, sort of like how various card games do it. The problem is that I want to write letters/numbers on them as well.

I've gotten the main code working with <div> tags, but the problem with using <div> tags is that like one would expect, it tends to force a break. Is there any other way I can do things?

Thanks in advance.

[sunfighter]

div {
display: inline;
} should remove that effect. floats also work.

[green_meep]

Thanks for your response.

I was reading that it's not recommended to override this standard behavior of <div>s, and should instead use <span>s. However, it doesn't matter between inline <div>s and <span>s, because when I switch, it seems to not display anything at all, whether I have height/width explicitly set or not.

[Basscyst]

Inline elements don't have a set height and width, they just fill to the content, so if you have nothing in the inline element it never gets large enough to display the background image.

Just set float:left

I'd suggest putting all your floated divs in a container div also set to float:left;

Then if you have any content further down the page, you'll put it in a container with clear:left;

This will ensure that the container of your floated elements maintain its place in the dom and allow you to properly adjust its margins.