2 Column Website Layout Example - Even Columns Stretch Vertically 100%

I wanted to create a 2 column website that had a left navigation that stretched vertically with the right content.

It worked fine but when I applied a background color to the left navigation, the background color would not stretch vertically to match the height of the right content, if the right content was taller (which it always would be).

To correct this, I had to create a background image that repeated vertically (repeat-y) on the main site container (Wrapper), this allowed the background color to stretch the entire height of the website.

Below is the resulting website:
To download the website example, click here. (Please note I put the CSS directly in the HTML file (internal CSS) to make it more clear on how I implemented this, its highly advised to use a stylesheet.).


Keywords: 2 column website stretch vertically evenly, 100%


Submit a Comment