Resizable Faux Columns works with responsive page

Posted in Tutorials

Tweet This Share on Facebook Bookmark on Delicious Digg this Submit to Reddit

In a previous tutorial from which we now continue, we made an responsive page that resizes as the browser resizes. But as you will note, the column lengths are uneven due to uneven content…

This can be remedied using a the “faux column” technique that uses a background image of the form …

This background is to be applied to the page wrapper and repeated down in the y-direction.

However, you have to make this image really wide (say 3000 pixels) to accomodate those people who stretch their browsers with really wide monitors.

And then apply this background image as follows …

The trick is use the background x-position a percentage that matches the column split percentage.

Here is how it looks….

And it will look the same even if you resize the browser.