Question

As part of creating a typical left, mid, right column layout, I need to wrap some inner divs of various height into an englobing/parent div. I need to make sure the global/parent div is as high as the highest inner div, which depends of the text it contains. The min-height property won’t cut it.

How should I proceed? Should I use tables and cells instead of divs?

I am including a JSFiddle to describe the issue.

Answer 1

I guess you want to achieve something like this: http://jsfiddle.net/Cj75q/3/

If I’m right you don’t need all these relative and absolute positions, all you need is float left of the columns:

#leftCol {
    background-color: #123456;
    width: 23%;
    margin: 0px;
    border: 0px;
    padding: 0px;
    float: left;
}

#midCol {
    background-color: #654321;
    width: 50%;
    margin: 0px 10px 10px 0px;
    border: 0px;
    padding: 10px;
    float: left
}

#rightCol {
    background-color: #567890;
    width: 23%;
    margin: 0px;
    border: 0px;
    padding: 0px;
    float: left;
}