html - table-cell height is not fitting to content -


i using css tables setup basic grid page. center cell of each row contain content whereas first , third "columns" background color.

the problem having has table-cell height. here jsfiddle showing issue: http://jsfiddle.net/uqua9/

    /*** essential css layout ***/      html, body {         height: 100%;         margin: 0pt;     }      .frame {         display: table;         width: 100%;     }     html>/**/body .frame {         height: 100%;     }      .row {         display: table-row;         height: 1px;         overflow: hidden; /* commenting out has no effect. */     }      html>body .row.expand {         height: auto; /* commenting out has no effect. */     }      .row div {         display: table-cell;     } 

note in headerrow, contentcolumn has large gap beneath end of text between , menurow. don't understand why table-cell padding out that. far can see, don't have padding or margin set account empty space. went css table because autofit cell height content , isn't working!

here's screen shot illustrate. grey problem. cell should end on line after text there bunch of empty grey. pink menurow should displayed right after text in headerrow.

screen shot

i know missing simple or obvious. hints appreciated.


Comments

Popular posts from this blog

html - Sizing a high-res image (~8MB) to display entirely in a small div (circular, diameter 100px) -

java - IntelliJ - No such instance method -

identifier - Is it possible for an html5 document to have two ids? -