Adapting container height to child's

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.

So you're looking for *equal height columns*? Part of your problem is that you're using absolute positioning... clearfix techniques can do nothing for that. — cimmanon, Jun 12 '13 at 17:28
I don't know in advance how high the two columns are. I would like the container to increase its height to at least the higher column. Should i just change to relative positioning? I'll give it a try in the fiddle :) — Erenor Paz, Jun 12 '13 at 17:30
Modifying the positioning to "relative" extend the container's height, but gives me problems with layout. So, i kinda resloved the problem by inserting the floats into container and childs, so i obtain [this Fiddle](http://jsfiddle.net/UfWJh/5/). I still leave the question open, to see if there's a solution without floats, otherwise i'll stick with them.. — Erenor Paz, Jun 12 '13 at 17:48
When you put a -1 to a question, please also explain why, thanks. — Erenor Paz, Jun 12 '13 at 17:57

Dom · Answer 1 · 2013-06-12T17:53:31.963

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.

Maybe i didn't understand, but i'm not setting the height for the parent div (`#content_wrapper`) — Erenor Paz, Jun 12 '13 at 17:40
By the way..if by "missing css selector" you mean the "ul" inside `#div_2 ul li`, i'd say that's really not needed. Into "div_2" there's only that list, so the `
Fair enough, I prefer to use classes anyway, even for such a simple layout, I name my classes to describe what they're for, and that way I can come back to a project after a month and still figure out what I was trying to do. — Dom, Jun 12 '13 at 19:23
That's absolutely good behaviour :) In this case, thought, i am just referring to the list elements inside a div with an id, so i don't think it's needed to have them associated to a class — Erenor Paz, Jun 12 '13 at 19:56

score 1 · Accepted Answer · answered Jun 12 '13 at 17:50

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;
}

I see the Fiddle and it's nice, but i don't really want the two columns to be of equal size, that's why i was having issues with container's height not adapting :) — Erenor Paz, Jun 12 '13 at 18:00

Riskbreaker · Answer 3 · 2013-06-12T18:12:39.530

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/

Adapting container height to child's

3 Answers3