Question

I have a div main that has a table grid. This table has your rows added dynamically. So, the problem is, when i add a row to the table grid the height of the table grows up, but the height of the div main no. Thus the table is staying in front of the footer content. What i have to add in css or in html to enforce the height of the div main grows up with the height of th table grid?

The code and the behavior: http://jsfiddle.net/BBcsB/8/

The problem is in the fieldset here:

fieldset
{
    border: 1px solid #DDDDDD;
    padding: 0px 20px 5px 10px;
    margin: 0 0 1.5em 0;
    display: inline-block;
}

So, when i remove the display: inline-block; works fine, but the fieldset is large, taking the entire div width and height. How can i solve the problem and stay with the fieldset surrounding the elements inside it?

Answer 1

Solved!

I put main and footer divs to float: left and width: 100% and fieldset to float: left too, and remove the display: inline-block of fieldset.

Here: http://jsfiddle.net/BBcsB/9/