nested divs to be equally long

<div id = "content">

<div id="column1"> </div>
<div id ="column2"> </div>

</div>

I have a problem where I want column1 and column开发者_开发问答2 to be the size of the content div (so each column is as long as the largest column). But I tried setting the height of each column to auto or 100% in the hope it would take up the space, but both still take their own size.

How can I do this ? (can't use tables only css)

In this example column 1 needs to become longer (as long as column2)

---

Well, it kind of depends on your purpose for this. I'm guessing that this is a background-problem, in which case this could easily be solved using "faux columns".

Read more about it here: http://line25.com/articles/create-sidebars-of-equal-height-with-faux-columns

---

You can't get away with just CSS for this, unfortunately (unless you just manually set both the div's heights to 500px or something, but of course that's not practical).

The solution is fairly simple with jQuery, this tutorial here should help you get it set up pretty easily: http://www.cssnewbie.com/equal-height-columns-with-jquery/

EDIT: if you do really want to do this with just CSS, have you looked into Faux-Columns before? The A List Apart article explains them well: http://www.alistapart.com/articles/fauxcolumns/

---

Surely something along the lines of the following will suffice.

<style>
  #content{
      height:100%;
      width:100%;
  }
  #column1,#column2{
      display:inline;
      float:left;
      height:100%;
  }
  #column1{
      width:25%;
  }
  #column2{
      width:75%;
  }
</style>


<div id="content">
    <div id="column1"> column 1 </div>
    <div id="column2"> column 2</div>
</div>