Question

I am attempting to make a simple column system I can use on a site and embed into any element that is cross browser and easy to use. I am trying to do this with pure CSS if at all possible. Everything works except the borders don’t line up.

Everything I’ve tried to do hasn’t worked.

View the css here:

http://jsfiddle.net/JamesKyle/8H7hR/

Script Version:

http://jsfiddle.net/JamesKyle/8H7hR/3/

Answer 1

You use display:table-cell for your span like this:

.columns .col {
    display: table-cell;
    position: relative;
    width: 49.9999%;
    text-align: justify;
    border-left: 1px solid #ccc;
    background: #f5f5f5;
}

Check this fiddle http://jsfiddle.net/8H7hR/5/