Styling inline definition lists

Yes I would use widths as a fallback for IE8. Juts place the normal width before the calc width.

e.g.

width:70%;/* or whatever*/
width:calc(100%- 160px;)

Yes good demo :slight_smile:

Percentage widths are actually easier than my example but I don’t like the fact that small percentage widths get too small very quickly. It’s probably not an issue in this example but if you have a long data term then it will wrap into many lines.

On a similar note the reason I put the border on top is that you will never run into the following issue where the dt is taller than the dd and thus overlaps the border you placed at the bottom.

<dt>Problem if his text runs to more lines than the rest then the line will overlap especially with percentages in the mix and lines wrap sooner</dt>

You can never know if the dt is taller than the dd so placing an absolute border from the bottom of either cannot be guaranteed to work. However both the dt and dd will always start on the very first line so you can always be sure the border won’t get overlapped by text if you place it at the top.

A minor issue I know and probably not relevant here but I do like to have code that will work irrelevant of content stipulations. :slight_smile: