CODEWITHSUNDEEP
csscross-browser
James Kyle
James Kyle

Reputation: 4178

CSS Columns Height Error

Column Error

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/

Upvotes: 0

Views: 99

Answers (2)

Tom Wahlin
Tom Wahlin

Reputation: 137

Here's an article that should help: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Upvotes: 0

sandeep
sandeep

Reputation: 92803

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/

Upvotes: 2

Related Questions