Two column layout

Question

Here is what I'm trying to do.

I have two columns. Let's call them col1 and col2. I want it so that if the height of col2 increases, the height of col1 will increase accordingly to the same height. How can I achieve this?

I know that I can do it using tables, but I'm looking for a css-based solutions.

http://stackoverflow.com/search?q=css+equal+height – Sotiris Jun 28 '11 at 12:23 — Sotiris, Jun 28 '11 at 12:23
Also do you have an example of what you've tried so far? – SpaceBeers Jan 17 '12 at 10:03 — SpaceBeers, Jan 17 '12 at 10:03

score 0 · Answer 1 · edited May 23 '17 at 12:27

0

There are a ton of tutorials on Google:

http://www.google.ca/search?sourceid=chrome&ie=UTF-8&q=same+height+columns

Other stuff here:

Equal height columns in jQuery

edited May 23 '17 at 12:27

Community

1
1

answered Jun 28 '11 at 12:18

Jason Gennaro

34,535
8
65
86

score 0 · Answer 2 · edited May 23 '17 at 12:04

0

As CSS - Equal Height Columns? already explains the best resource probably is http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts

Basically you have wrappers around your columns and they become your actual backgrounds and not the columns themselves.

edited May 23 '17 at 12:04

Community

1
1

answered Jun 28 '11 at 12:54

armonge

3,108
20
36

score 0 · Answer 3 · answered Jan 17 '12 at 10:02

You can fake it with an image using the faux columns technique, but you can do it just with CSS - http://jsfiddle.net/spacebeers/s8uLG/3/

You set your container up with overflow set to hidden, then on each div add negative margin-bottom and equal positive padding-bottom.

#container { overflow: hidden; }
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }
#container .col2 { background: #eee; }

<div id="container">
   <div>
        <p>Content 1</p>
   </div>
   <div class="col2">
        <p>Content 2</p>
        <p>Content 2</p>
        <p>Content 2</p>
        <p>Content 2</p>
   </div>
</div>

EDIT: If you want a border round it then have a look at this example - http://www.ejeliot.com/samples/equal-height-columns/example-6.html

Two column layout

3 Answers3