Liquid layouts, background-position, and percentages

In a recent web design project I’ve been fiddling around with liquid layouts (i.e. layouts which change size depending on font sizes defined by the browser or the browser’s windows size). The faux columns technique described by Dan Cederholm has already been an often used tool in my development projects, so creating equal height columns wasn’t a new prospect.

Because of the design, I wanted to use percentages as the widths of the two columns. In this case, I wanted the main content to span the first 70% and the sidebar should take up the rest. Positioning the background became a challenge for me that I needed to find a way to overcome.