Last Updated: February 25, 2016
·
656
· andrewdavid

Borders with percentage widths

For the first time in a very long time, I've had to use % to adjust the width of several floating divs inside a larger div (to simulate a table without actually using the html table element). I realized that trying to keep those divs aligned in there while having left or right borders is basically math hell.

After experimenting with a bunch of potential solutions, I came up with this:

.row_cell {
    position: relative;
    float: left;
    display:block;
    width:10%;
    height: 40px;
    line-height: 40px;
}
.row_cell:after {
    position: absolute;
    top: 0;
    right:-1px;
    display:block;
    width: 1px;
    height:100%;
    content: '';
    background: #000; /* Border color */
}

I hope this eventually ends up being useful to someone else :)