3 Answers
3

The solution is tricky BUT it's totally do-able! I had to solve a similar problem at a former job where we had a two-column style layout that needed to fit all screen resolutions.

FIRST (we'll deal with width later), we want to create a "table-like" feel for the two columns ("sidebar" and "page"), which means if the sidebar is taller than the content in a page, the background of the "page" column should extend all the way to the bottom (same height as sidebar), and vise-versa. To accomplish this, we do a little div-ception as follows:

What we want to do here is give "main" the same background as "sidebar" and "two_columns" the same background as "page". This way, when either "sidebar" or "page" grow in height, BOTH "main" and "two_columns" are forced to grow in height with it.

SECONDLY, we want to ensure that this can fit ALL screen resolutions. Luckily, this div-ception setup is well suited for this. We'll pretend the backgrounds are colours for simplicity.