Question

I have a parent div, with three divs inside it to create a column effect:

#container {
  height:230px;
  float:left;
}
#container_colone {
  float:left;
  width:40%;
  height:auto;
}
#container_coltwo {
  float:left;
  width:40%;
  height:auto;
}
#container_colthree {
  float:right;
  width:40%;
  height:auto;
}

with html here

<div id="container">
  <div id="container_colone">
    col one here
  </div>
  <div id="container_coltwo">
    col two here
  </div>
  <div id="container_colthree">
    col three here
  </div>
</div>

Since I am setting the height in the container, I want all the columns in this container to have the same height. So if I set the container div to 400000000px, all three cols will have the same height.

The above code isn’t cutting it, and I need help to understand what I need to do so I can get this quickly in the future.

Any help would be greatly appreciated!

Answer 1

Change the CSS as:

    #container {
    height:230px;
    float:left;
    }
    #container_colone {
    float:left;
    width:30%;
    height:100%;
    }
    #container_coltwo {
    float:left;
    width:30%;
    height:100%;
    }
    #container_colthree {
    float:right;
    width:30%;
    height:100%;
    }