Question

I have a table with 3 columns and first and third column are divided by a vertical line for which i used table with with 100% height and background color which works in fine in FF but doesn’t work in Chrome or IE.

Now i replace the table with div tag but empty div doesn’t show up. Below is the sample code i tried so many thing now i am confused what to use. Need help from CSS Gurus.

 .PageLine2V
    {
        width:2px;
        content: "";
        min-height: 100%;
        background-color:#D1C094;
        background-image:url('../images/gold-line-2v.gif'); 
        background-repeat:repeat-y;
    }
<table height="100%">
        <td width="60px" valign="top" align="center" >
         <div class="PageLine2V"></div>
        </td>
</table>

I am not sure how i can make this empty div show up and grow with table height also

Answer 1

 .PageLine2V
    {
        width:2px;
        content: "";
        min-height: 100%;
        background-color:#D1C094;
        background-image:url('../images/gold-line-2v.gif'); 
        background-repeat:repeat-y;
        height: 100%;

    }

Give the div a height of 100%

Also add something in the div such as a space it won’t render without content.

<table height="100%">
        <td width="60px" valign="top" align="center" >
         <div class="PageLine2V">&nbsp;</div>
        </td>
</table>