Its not valid to put an hr between the dt and the dd as all content in a dl must be inside the dt or dd tags. That’s what makes a dl list quite awkward to work with.
You will need to give a width to the dt so that it lines up with following dt’s and then use calc to work out the remaining width.
Hmm IE8 doesn’t support calc(). I’ll have to see what the fallback looks like (yes some clients still use IE8) but if it looks like my initial version that’s not too bad.
I still get a tiny minority of IE8 visitors. I have stopped caring about them getting exactly the same look as modern browsers do. If the site displays and the content is readable, that’s enough as far as I’m concerned.
If they don’t see round-corners, shadows, css columns, or see standard inline-blocks in place of fancy flex-box layouts, it’s not the end of the world.
If you work too hard to accommodate them, they will never upgrade!
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
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.
Hmm. My issue with this is that the dl is containing in a div with varying width. I’ll suppose I’ll just set the dd width to the minimum for IE8 and it simply won’t expand to take up all the horizontal space…
Now I just need to force a new line after each dd. As it stands, with the dd set to the minimum width I end up with multiple dt/dd pairs per ‘row’.
Do you mean that the data terms (dt) will be of varying length? That seems a little awkward and subsequent rows won’t match up with alignment and indeed if there is a lot of text on the dt then it would spread all the way across the line.
Both the above examples do not have this issue as each pair always fills a row.
Perhaps an illustration of your desired result would help:)
What it means is that you have not tried Paul’s or Sam’s code as it is because they both adapt to changing widths in IE8 without any substitutions on your part.
I wrote a version that floats the dt and it adapts to changing widths in IE8, too.
Don’t change code that works if you don’t know what you are doing. We’ll help you fit it into your page, but we’ll need to see the surrounding code to do that.
small percentage widths get too small very quickly
In my edited version, I was trying to simulate the min and max width of the dl in my use case and see whether a fixed width dt could work in order to avoid this. I commented out the calc()s in order to force the IE8 rendering as I don’t have anything that could emulate IE8 currently installed. It turns out that Paul’s original percentage based version will work fine so problem solved!