Making vertical separator css

Question

I need help with making double vertical lines.

Here are 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-separator has width 2px because of border and this causes the problem. I have tried to make .slide-container width a bit less than 25% (like 23.853%), but this is not the decision.

I have no idea how to implement this feature somehow else.

Btw I am using Foundation 5 and Compass.

fiddle which demonstrates the problem: http://jsfiddle.net/5w7Hr/

Answer 1

The width:25% generally doesn't include the margins and borders. When all these are added together the width exceeds 100%. This is the reason why the last box gets pushed down. You can fix this by adding box-sizing setting as shown below.

Note: Elements whose display is inline-block by default have a margin assigned and hence we have to offset that also by assigning a negative margin (Source: CSS Tricks). Alternately, using float: left instead of display: inline-block is also a good option.

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

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

Demo