I have a designer who likes to list an item and then have the dot dot dot and then the number or price or something, so it looks like the example on the right.
That’s all fine and good, except when you realize that different browsers show those dots in different sizes, so the alignment is not going to be the same and the numbers on the end just won’t line up.
Add that to the fact that you want the site to be responsive – so sometimes those dots need to grow or shrink, how can this be done?
Well, it took me a little while to figure it out, but this seems to work for me.
Here’s my CSS:
.room-row {
width: 100%;
display:table;
}
.room {
display:table-cell;
white-space:nowrap;
line-height: 1.4;
padding-right: 5px;
}
.dotted {
border-bottom: 2px dotted #fff;
display: table-cell;
width: 100%;
}
.capacity {
text-align:right;
white-space: nowrap;
margin-left: 5px;
}
And here’s my HTML:
Lounge25Blue room20-40
View it in action here and check out how it works responsively:
And see it live here:
Mark says
Very cool, and I will use the technique. In your CSS, the dots are #fff, so they don’t show up.
Laura Hartwig says
Glad you like it and might be able to use it. Yes, the dots are white because I wanted to show you the exact CSS I used in my example and it has a dark background, but you can, of course, make the dots any color you want. I’d love to see it if you end up using it!
Joe says
Is there a way to move the dots up a bit? I would think changing the line height or the height of the dotted div would do it, but no luck. It just ends up moving everything up which is no good. Awesome post by the way thanks for the help!
Laura Hartwig says
I don’t see a way to do it with the dots, unless you use an image instead of the dots or something. If a solid line would be okay, you might be able to play around with an inset box shadow. I’d love to see where you used it. Good luck!