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 :)
Written by Andrew-David
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Css3
Authors
Related Tags
#css3
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#