Question

I’m making a tag-cloud-esque display of words, each contained within small divs, and floated so that many appear on each line. However, if I start changing the font size in some of the divs, the line structure gets broken up and huge gaps appear, as in this screenshot:

Can anyone offer any advice on how to resolve this? I’m not looking to do anything fancy, like having multiple lines of smaller tags alongside larger ones: I just want the divs to obey a normal looking line structure.

Here is the relevent css:

div.example {
background-color: #8C7D80;
padding: 2px;
margin: 2px;
float: left;
color: #96888B;
text-align: center;
position: relative;
}

Answer 1

Try upping the line-height.
The brackets seem too be too large, thus breaking the line.

div.example {
  // other stuff here
  line-height: 1.5
}

Is it possible you have set a fixed line-height?