Question

I have this CSS:

#center{
    display:table-row;
    border:solid #55A 1px;
    background-color:#AAF;
    height:100%;
}

Actually, the border property is just ignored. Why? How can I Fix it?
DEMO
Thanks

Answer 1

If you add a ‘cell’ to the table-row, for example:

<div id="content">
    <div id="top">TOP</div>
    <div id="center">
        <div>CENTER</div>
    </div>
</div>​

Then the following CSS works:

#center{
    display:table-row;
}
#center > div {
    display: table-cell;
    border:solid #55A 1px;
    background-color:#AAF;
    height:100%;
}

JS Fiddle demo.

It’s important to remember that the browser will render an element as you tell it to; so if you tell a div to display: table-row it will display that way; and a table-row does not have a border. table-cells do, though, which is why I added the child div and assigned it that display property.