Question

I am creating a horizontal legend in html/css. I have a colored box with some text next to it, then some space, then another colored box with some text, a space, etc.

[blue] - LabelA    [green] - LabelB    [red] - LabelC

I can’t figure out how to do this cross browser. I have tried all combinations of floating divs/spans I can think of, but either the label ends up going underneath the colored box or I can’t get padding to work to separate each key in the legend.

How would you do this?

Answer 1

You don’t need floats for this sort of thing. Really what you have is a list of pairs. There is a tag set for that called a definition list:

<dl>
    <dt>[blue]</dt>
    <dd> - LabelA </dd>

    <dt>[green]</dt>
    <dd> - LabelB </dd>

    <dt>[red]</dt>
    <dd> - LabelC </dd>
</dl>

These are inline block by default. From there you can style the pairs of elements like so:

<style>
     dl
     {
         width: 200px;
         background: #fff;
         border: 1px solid #000;
         padding: 5px 15px;
      }

      dt, dd
      {
         display: inline;
      }       
</style>