Question

I’m getting strange behavior when I change the font size on right aligned text. When I lower the font size, the text shifts left. More specifically, the right side of the right most character is farther left in a smaller font along with the rest of the characters.

HTML

<dl class="date-term">
<dt>24 Sep 2012</dt>
<dd>Lots of thinking and reading about writing this weekend, but no doing.</dd>
</dl>

CSS

p , dd
{
font-size: 1.125em;
line-height: 1.375em;
margin: 1.375em 0 1.375em 0;
color: inherit;
}
dl.date-term dt
{
float: left;
width: 5.8em;
margin-top: 0.250em;
text-align: right;
font-size: 0.8em;   /* de-emphasize */
color: #7e8b8c;     /* Make it more subdued */
}
dl.date-term dd
{
margin-left: 6.0em; /* .5em greater then width of dt above */
}

.2em is 2 or 3 px
My goal is to get the dt and dd closer together. The page in question can be seen here:
If I reduce the width of the dt, it will wrap even with a smaller font size. I’ve tried it in Safari and Firefox on OS X.

Thanks for any help,
Curt

Answer 1

To get the dt and dt closer together just reduce the margin-left of dl.date-term dd on master.css line no: 388

dl.date-term dd {
margin-left: 5em;
}