After an incredibly frustrating few hours trying to figure out why my liquid faux columns weren’t working I had a minor epiphany. I finally understand how background images positioned with percentages work! Not something that many people would get excited about, to be fair, but after an entire afternoon of twiddling numbers, resaving gifs and quietly cursing anyone who dared interrupt me, I was over the moon.
Here’s the key, lifted from the Colors and Backgrounds spec:
With a value pair of ‘14% 84%’, the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding area.
So let’s say you have two columns - the left one is 70% wide, the right is 30% - and you want a dividing line running vertically between the two. You could create a 100px white gif with a vertical black line at the 70px mark. 70px because it’s 70% of the way across the image. Then set the background on your container to:
background: url(divider.gif) 70% 0 repeat-y transparent
And that’s it. Simple once you know how. And, importantly, my temper is restored.
