Two Pane Website - Stretching Vertical Height?

Question

I have this layout:

The topbar is fixed. Then I want to have a sidebar in the left pane, and a right pane with the main content. The panes are different colors, and seperated by a border.

The problem is that sometimes the left pane will be taller and sometimes the right pane will be taller. And so one pane is shorter than the other (the color ends and you see white).

I've tried height:100%; but that only works if the content is shorter than the browser height.

How can I solve this with just CSS?

Setting an element to have 100% height will not work if its container does not have a fixed height. The Faux Columns technique that @motoxer4533 posted is a good workaround. — Wex, Dec 13 '11 at 22:17

Damon Bauer · Answer 1 · 2011-12-14T13:41:06.290

4

You can use a technique called "faux columns". A good example is Method 3 on this page, or as Wex added in the comment below, this link on A List Apart.

edited Dec 14 '11 at 13:41

answered Dec 13 '11 at 21:49

Damon Bauer

2,718
1
22
35

3

I'm quite partial to the article on [A List Apart](http://www.alistapart.com/articles/fauxcolumns/). – Wex Dec 13 '11 at 22:17

score 0 · Answer 2 · answered Dec 13 '11 at 21:50

You could try something like this. The only problem is you need to know a fixed height, if it's possible to have one column be larger than the other and there's no way of know which will be bigger you may need to do some jquery to figure it out.

http://jsfiddle.net/rhoenig/x7NAY/

score 0 · Answer 3 · answered Dec 13 '11 at 22:31

my solution for this problem is normallly to nest the columns so the one column controls the other, and then to give the other one a background image that looks as if it is the first continuing:

    <style>
    *{margin:0;padding:0;}
    .main_con{position:relative;margin:0 auto;width:960px;}
    .head_con{position:fixed;top:0;width:960px;height:42px;background:#ff0;}
    .col_con{padding:42px 0 0 0;}
    .left_col{width:360px;margin: 0 15px 0 0;float:left;background: #f60;}
    .right_col{position:relative;float:left;width:960px;background: #f00 url("image that looks like left column continued") repeat-y;}
    .right_col_content{float:left;width:585px;}
    .clr{clear:both;}
    </style>

for the html:

    <div class="main_con">
        <div class="col_con">
            <div class="right_col">
                <div class="left_col">
                        <p>left column content pushes right column down</p>    
                </div>
                    <div class="right_col_content">
                        <p>right column content</p>
                    </div>
            <br class="clr" />
            </div>
        </div>
        <div class="head_con">
            <p>head content</p>
        </div>
    </div>

note: *{} stripping is for sample purposes only and should be replaced with a proper default stripping bit of css.

Two Pane Website - Stretching Vertical Height?

3 Answers3