Creating a vertical css separator

Question

I need help creating double vertical lines.

Here are the styles:

.slide-container
{
    text-align: center;
    width: 25%;
}

.v-separator
{
    content: "";
    display: inline-block;
    width: 0px;
    height: 230px;
    border-right: 1px solid #fafafa;
    border-left: 1px solid #b4b4b4;
    padding: 0;
    position: relative;
    top: 20px;
}

.v-separatorhas a 2px width from abroad and this causes a problem. I tried to make the width a .slide-containerlittle less than 25% (e.g. 23.853%), but this is not a solution.

I have no idea how to implement this function in any other way.

Btw I am using Foundation 5 and Compass.

script that demonstrates the problem: http://jsfiddle.net/5w7Hr/

Answer 1

width:25% . , 100%. . , box-sizing, .

. inline-block , , (: CSS-). , float: left display: inline-block .

#wrapper
{
    width: 600px;
    background: lime;
    box-sizing: border-box;
}

.slide-container
{
    text-align: center;
    width: 25%;
    display: inline-block;
    margin: 0px -4px;
}