responsive css vertical divider

css, divider

Solution

In your case....its happening because i feel that your are giving position only to the div and not the containing `<td>`....give this parent `td` a position first

add height, width to `html`,`body` and your are good to go...

solution

CSS

html, body {
    height:100%; /* added */
    width:100%;/* added */
}
.divider {
    position: relative; /* changed*/
    left:30.5%;
    top:6%;
    bottom:25%;
    border-left:2px solid #333;
    overflow:hidden;
}
td.r {
    position:absolute;/* added */
    height:100%;/* added */
    width:100%;/* added */
}

HTML

<table width="100%" border=1>
    <tr>
        <td>this is test</td>
        <td class="r">       <!-- notice the added class-->
            <div class="divider"></div>
        </td>
        <td>This is test2</td>
    </tr>
</table>

EDIT

A much simpler and cleaner way to create divider is to use `td` only for divider, not the `div`....check this demo

Remove the `div` creating the divider and instead, add the `divider` class to `td` itself!

<table width="100%" border=0>
    <tr>
        <td>this is test</td>
        <td class="divider"></td>
        <td>This is test2</td>
    </tr>
</table>

CSS

td {
    text-align:center
}
td.divider {
    position:absolute;
    height:100%;
    width:1px;
    border:1px solid #000;
    background:#000;
}

Problem

Im creating a responsive table which contains a vertical divider. I want that divider to move along with the text according to all screen sizes. left and right td are responsive just the divider is creating problem. The CSS is ``` .divider{ position: absolute; left:30.5%; top:6%; bottom:25%; border-left:2px solid #333; overflow:hidden; } ``` and the related html is ``` <table width="100%"> <tr> <td> this is test </td> <td><div class="divider"></div></td> <td> This is test2 </td> </tr> </table> ``` The problem is when I change the position from absolute to anything else in css it hides the divider.

Original source