Adapting container height to child's - css

Question

I'm among the coutless people who are facing the same problem about adapting parent's height to the contained elements. I did some research and found similar questions, but no answer could help me, so i thought i should open a new one.
I already tried the suggestions given as answers here, and here, like adding "clearfix" as a class for the container div (in this case, the clearfix class is there in the Fiddle i created), adding a workaround-spacer, and so on. I don't have any floated element, thought, so maybe it's a different kind of problem.
The problem still remains, in both the nested divs i have in my code (#content_wrapper doesn't adapt to #div_1 and/or div_2, while #div_2 doesn't increase its height to the contained <ul>.
I really hope to find a solution (maybe it's just something wrong in my code i can't de-bug).
Thanks for your attention.

Answer 1

Generally speaking, you want to avoid using absolute positioning for layout purposes.
What you're looking for is equal height columns. The whole point of equal height columns is that you don't need to know the height of any of the columns involved, they'll all be the same height and expand gracefully no matter what their contents are. The simplest way to achieve this is by using the table* display properties.
http://jsfiddle.net/UfWJh/3/
body {
font-size:10px;
}
/* wrappers */
#header_wrapper {
width:95%;
height:40px;
margin:auto;
margin-top:5px;
padding:2px;
border:1px solid red;
}
#content_wrapper {
display: table;
width:95%;
margin:auto;
margin-top:5px;
padding:2px;
border:1px solid red;
}
/* div1 */
#div_1 {
display: table-cell;
width:70%;
border:1px solid purple;
}
/* div 2 */
#div_2 {
display: table-cell;
width:25%;
border:1px solid purple;
}
#div_2 ul {
list-style-type:none;
}
#div_2 li {
width:100px;
height:30px;
margin:2px;
padding:1px;
border:1px solid darkgrey;
}

Answer 2

If you want a parent element to adapt to it's children you cannot explicitly define the value of the axes (width or height) that you want to adapt. Use width:auto or height:auto then use min-width,min-height,max-width & max-height to set minimum and maximum values for the adapting axis.
You then set values for the children, which can either be explicit values or again min and max thresholds.
From your rather messy code, it was easy to see, you have done much of it right, but you must not understand the position options. Try to gain a better understanding of relative,absolute & fixed positioning.
I've fixed it by changing the absolute positioning to relative and fixing a missing css selector for the styles you were trying to use on the <li>'s:
/* div1 */
#div_1 {
position:relative;
width:70%;
top:5px;
left:5px;
border:1px solid purple;
}
/* div 2 */
#div_2 {
position:relative;
width:25%;
top:5px;
right:5px;
border:1px solid purple;
}
#div_2 ul {
position:relative;
top:0px;
left:0px;
list-style-type:none;
}
#div_2 ul li {
width:100px;
height:30px;
margin:2px;
padding:1px;
border:1px solid darkgrey;
}
I suspect you probably don't need all those fixes you tried. Also, I find code so much more readable in this format.

Answer 3

Here's is my answer:
Remove position absolute (it's not a good idea to implement your layout like this...not cross-browser friendly...)
Make its content display: table
and then display: table-cell on the 2 divs to have even height...
Here is the example:
http://jsfiddle.net/Riskbreaker/UfWJh/4/
If you do not want it this way or care about equal height then use overflow:hidden on the content wrapper and float: left the 2 divs...
Here is the example:
http://jsfiddle.net/Riskbreaker/UfWJh/7/