2 column CSS div with stretchable height

Question

Related (possibly duplicate) questions:

How do I achieve equal height divs with HTML / CSS ?

Make Two Floated CSS Elements the Same Height

Hello, every one,

I tried for hours to create a stretchable 2 columns div but without any luck. here is my html code and my css code below it

<div class="two_cols_container">
  <div class="two_cols">
    <div class="left-col">
      test
    </div>
    <div class="right-col">
      test
    </div>
  </div>
</div>

my css code is

.two_cols_container {
  width: 100%;
  height: 100%;
} 
.two_cols {
  position: relative;
  margin: 0 auto;
  border: 1px solid black;
  height: 100%;
  height: auto !important;
  min-height: 100%; 
}
.two_cols .left-col {
  /*position: absolute;
    left: 0;*/
  float: left;
}
.two_cols .right-col {
  /*position: absolute;
    right: 0;*/
  float: right;
}

any idea?

Answer 1

There's

1. Tables ( you probably wouldn't want to rely on this )
2. Faux Columns ( the most practical way, faking columns going down using images - see http://www.alistapart.com/articles/fauxcolumns/ )
3. Border Trick ( a little complex but this only works for solid colors )
4. Padding / Margin / Clipping ( another complex one I wouldn't recommend )

I'd go with #2. If you need colors that are backgrounds of those columns to go all the way down, set a background on the container of those columns and make sure it repeats vertically, e.g,

div#wrapper { background:url(/images/faux.gif) repeat-y; }

If the columns are floated make sure to have overflow:hidden and a hasLayout trigger for IE like a width.

By the way since you have floats, apply overflow:hidden to .two_cols selector and add this rule:

html, body { height:100%; }

Answer 2

A: either use float OR absolute positioning to make your columns. not both. You can just float both the columns to the left and it should be ok with no absolute positioning.

B: you're big problem is the columns can't be next to each other if both of their' widths are 100%. There's no way they can sit side by side in their containing element when they both take up the whole width. Set the width to at most 50%, but I'd go with a little lower to account for some browser bugs.

EDIT: I agree with Sneakiness, wet the width to something lower than 50%, because the margins and padding have to fit too.

Answer 3

If you mean that you want a fluid two-column layout, you need to set margins for both columns separately to position them both on the page.

Answer 4

I found this method to be the simplest and most effective of all equal-height two-column layouts. You don't have to fake anything, and it Just Works.