28th October, 2005

CSS Challenge: Come on, boffins!

Today a colleague set me a CSS challenge that I just can’t meet. I can sort of achieve the desired effect with appalling markup and combined paragraph and unordered list styles, but that’s awful. Maybe one of you boffins out there can make it work, or maybe it’s just plain impossible. Here’s the skinny…

The challenge

The aim is to apply underlines to paragraph text that stretch the whole width of the column (without using justified text), regardless of the lengths of the paragraph text itself. Whilst this can be achieved with background images, this will be useless when the user resizes the text, as the text will break out of the lines and look a right mess.

What we don’t want is this

Here is the easy way, but not what we want. Applying a bottom border to the paragraph would only give us one border underneath the paragraph, so inside the paragraph, a span is used to apply the bottom border to the text. That’s fairly easy, but the lines do not stretch to the full width of the column:


So that is no good. We need to make the lines stretch, and also have them resize with the text.

How it should work

OK, here is how I want it to look. See that the horizontal lines stretch the full width of the container, regardless of the text:


Why can’t we use background images?

Yes, it’d be easy to create a background image of horizontal lines and combine that with line-height in the paragraph to achieve the effect, but if you resize the text with the browser, the background image is not gonna resize with it. Check out the dark blue area on The Big Noob. A lovely site, and they’ve carefully combined the background image with the text. However, if you resize the browser, the text breaks out of the lines and it looks a bit wrong.

What can we use?

I’m trying combinations of absolute and relative positioning, display: block and display: inline, differing line-heights, custom underlines - all sorts really. The only rules are that we shouldn’t need extra markup bloat (such as my unordered list) and the thing should validate. That’s it. Anything goes.

Can you help?

Make it happen first, and I’ll send you a little prize. Link to a working example on your server, with explanatory text if possible, or leave tips in the comments. Ensure the text resizes on all important browsers, and that the lines adjust accordingly. If you crack it, and your code is lean and valid, you’ll win something as yet undecided, and get bigged-up on these here pages. Alternatively, do you think it’s impossible?

I can’t keep banging my head against a brick wall here, so it’s TEAM time (Together Everybody Achieves More). Go web, go!

Prev / Next


If you enjoyed this article, please subscribe to my Internet of Natural Things letter, and maybe grab the RSS feed. Thank you.