I am facing an issue with a div main containing a table grid. Rows are dynamically added to the table, causing it to increase in height. However, the height of the div main remains unchanged, resulting in the table overlapping the footer content. What changes can be made in the CSS or HTML to ensure that the height of the div main grows along with the table grid?
To see the code and behavior in action, please visit: http://jsfiddle.net/BBcsB/8/
The problem lies within the fieldset:
fieldset
{
border: 1px solid #DDDDDD;
padding: 0px 20px 5px 10px;
margin: 0 0 1.5em 0;
display: inline-block;
}
Removing display: inline-block; resolves the issue, but this causes the fieldset to expand and take up the entire width and height of the div. How can I fix this while still ensuring that the fieldset surrounds its contained elements?