html – CSS to lay out keys/values legend horizontally.-ThrowExceptions

Exception or error:

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?

How to solve:

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>

###

Here’s a simple example: http://jsfiddle.net/MTB2q/

enter image description here

###

check out this jsfiddle and see if this is what you are looking for http://jsfiddle.net/CQXk5/

###

No need to use floating divs. Try this

DIV.LegendItem
{
   display:inline-block;
   margin-right:20px;
}

(add width and height if DIV has no content)

Sorry if your text is not in the box also add this…

SPAN.LegendText
{
   display:inline-block;
   margin-right:20px;
}

Example here

###

This should work…

Avoided floats as you specifically mentioned cross browser, so I assume you are at least supporting IE7. IE7 wraps floats in kind of a nasty way which is why I suggested inline divs.

DOCTYPE HTML

<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!-- Consider adding an manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

HTML

<div class="Legend">
  <div class="Blue">&nbsp;</div>
    Blue
    <div class="Green">&nbsp;</div>
    Green
    <div class="Red">&nbsp;</div>
    Red
</div>

CSS

.Legend div{
    margin-left:15px;
    width:16px;
    border:1px solid #808080;
    display:inline-block;
}
.ie7 .Legend div{
    display:inline;
    zoom:1;
}
.Red {background-color:red;}
.Green {background-color:green;}
.Blue {background-color:blue;}

###

Try using a small table and using background colors.

<table>
  <tr>
    <td style="backgroundcolor:red; width:5px">&nbsp;</td>
    <td>- Red</td>
  </tr>
</table>

###

Based on Rob Allen answer, this is a quick and simple legend using definition lists:

dl, dt and dd are display block by default. Since we want the dt and dd to be on the same line, we use display: inline-block. (Inline block is important for us to be able to control the width and height of the colored square)

HTML

<dl>
    <dt class="red"></dt>
    <dd>Existing clients</dd>

    <dt class="yellow"></dt>
    <dd>New clients</dd>
</dl>

CSS

dl dt{
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
}
dl dd{
    display: inline-block;
    margin: 0px 10px;
    padding-bottom: 0;
    vertical-align: middle;
}
dl dt.red{
    background: #f8d7da;
}
dl dt.yellow{
    background: #f2c715;
}

Result:
See the result here

Leave a Reply

Your email address will not be published. Required fields are marked *