Question

To describe my item- I have a div element which grows in size if more content is added- also the parent div grows in size as it should be.

Then I have 2 div elements one floated left and the other on the right. I set height to 100% but that don’t work. How could I achieve such behavior?

http://109.91.124.194/nucleareducated_2/index.php

Answer 1

This is a typical problem that unfortunately does not have a simple solution. Do a quick Google search for equal height columns and you will see what I mean. Your code is not working because height:100% does not work unless the parent container has a specified height to calculate what 100% is. Without a specified height set, then height:100% defaults to height:auto and you end up with divs that do not expand to the size of the parent.

As you have probably guessed, it’s pretty hard to set the height of the parent div because it changes. The answers include setting the height dynamically with Javascript, or more often than not, just faking it so that it appears that the columns expand to the size of the parent.

IMO the best way is to use the css table attribute if you only care about newer browsers, it does not work on IE7 or older.

#containerdiv {
    display:table;
}

#childdivleft, #childdivcenter, #childdivright {
    display: table-cell;
}

The next best is to use large values for padding and a corresping negative margin on the bottom of the child containers.

#leftdiv,#rightdiv {
    padding-bottom: 32767px;
    margin-bottom: -32767px;
}

You can also use –

jQuery – Columns of Equal Height with JQuery

several other solutions – CSS – Equal Height Columns?