Wrapping text and div as a unit

Question

I have the following that I would like wrapped as units.

<div class='tag-box'>
   <a href=#>Axe Committee</a>
   <div class='circle'><a href=#>x</a></div>
</div>

The CSS for these classes are:

.tag-box {
  display:inline;
}

.circle {
  display:inline;
  padding-left:4px;
  padding-right:4px;
  background:rgb(196,15,24); /*dark red*/
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
}

.circle a {
  font-size:10px;
  text-decoration:none;
  color:#fff;

  position:relative; top:-2px;
}

I can have upwards of 20 or 30 of these tag-boxes displayed inline. The problem is that the wrapping will break the words from each other or even break the red circle from the link. This makes it hard to differentiate which circle belongs to which link. (In the future, each circle corresponds to a different action with respect to the link.) See below.

How do I prevent this kind of wrapping from occurring?

Answer 1

0: Use white-space: nowrap;.

1: You could have the circle as background of your .tag-box (or your .circle a). eg:

.tag-box {
  display: inline;
  background-image: url('circe.png');
  background-position: 100%; /* Display to the right */
  background-repeat: no-repeat;
  padding-right: 10px /* To leave space for the image */
}

2: You could use fixed-size floating .tag-box-es ( :/ )

3: You could have a (ready made) script put a circle on the right of every ".circle a"

Answer 2

You could try:

.tag-box { display: inline-block; }

Although you may experience some issues with firefox 2 and older versions of IE

Answer 3

You want each of your .tag-box to be inline (not taking all the width available) but still being considered as a block (its content shouldn't be cut in half). Here enters ... inline-block!

Here is a complete HTML code: http://pastebin.com/24tG7tCz

I used a list of links to better represent the lists of couple of links tag+action (bad news: you've a divitis syndrome ;))

I also added *title*s: your 'x' links aren't accessible at all and can be confusing for everybody, with or without any handicap, because one is never sure if the x will suppress the tag on the left or on the right: there are dozens of links, each with the text 'x'! A title attribute on the a element tells blind users and everybody else via a tooltip what'll really do that x.

With a span inside a.x, you can change the background-color on hover and focus, it wouldn't be possible with a inside a span or div.