Question

This is giving me such a headache i just have to ask. I never seem to have trouble with C# or Java or SQL or JS as I have with CSS, and i spend too much time trying to figure things out.

I have a table div and some row and cell divs inside it. And i just want to make table div to be of exact height.

My current style:
div .table
{
    width: 410px;
    height: 410px;
    max-height: 410px;        
    display: table;
    border-spacing: 10px; 
    border-style:dotted;
    border-width:medium;     
    overflow: visible;
}

What else do I have to do to make div exactly 410 px high?

I tried wrapping it in a outer div (with blue borders in picture with specific height and display:block) but table div does not seem to notice it. I added a div with clear:both at the bottom, sometimes it helps but not today…

Answer 1

It appears that:

display:table;

will force the element to expand to fill the width of the content. Even if you set “overflow” to be hidden.

Here’s a fiddle with some examples:

http://jsfiddle.net/dRLfv/

I think you’ll need to do a regular “display:block” and then set overflow appropriately. That would probably require you to adjust some of your other styles for the table/form elements inside but that should be double and I’m sure others will be happy to help.

I hope that helps!

Cheers!