nested divs to be equally long

Question

<div id = "content">

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

</div>

I have a problem where I want column1 and column2 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) enter image description here

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

This has been asked sooo many times here on stackoverflow. Please use the searchbox before posting questions. http://stackoverflow.com/questions/4973/setting-a-divs-height-in-html-with-css/5103#5103 — ingo, Jul 03 '11 at 11:13

Jack Franklin · Answer 1 · 2011-07-03T11:15:02.357

0

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/

edited Jul 03 '11 at 11:15

answered Jul 03 '11 at 11:09

Jack Franklin

3,765
6
26
34

-1 for a non-CSS answer that promotes JavaScript proliferation. – Kerrek SB Jul 03 '11 at 11:12
Apologies, but as far as I'm aware getting them to the same height cannot be done with just CSS, hence using a JavaScript solution. Although I have now added a link to an article on Faux-Columns, which slipped my mind! – Jack Franklin Jul 03 '11 at 11:13
2

it can http://stackoverflow.com/questions/4973/setting-a-divs-height-in-html-with-css/5103#5103 – ingo Jul 03 '11 at 11:18
Well I didn't know that ! You learn something new every day, thanks. – Jack Franklin Jul 03 '11 at 11:20

score 0 · Accepted Answer · answered Jul 03 '11 at 11:15

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

score 0 · Answer 3 · answered Jul 03 '11 at 11:38

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>

nested divs to be equally long

3 Answers3