Add vertical line between the vertical divs - html

Question

I want to add a vertical line between the multiple divs so that it looks like the attached image:
I'm trying to achieve that by adding a div .border and setting its position absolute. However I want to add some margin between the border and make the border appear behind the boxes as in above image.
Here's the code I'm trying:
HTML:
<div class="wrap">
<div class="box">
<div class="border"></div>
<div class="figure"></div>
<div class="right"> right</div>
</div>
<div class="box">
<div class="border"></div>
<div class="figure"></div>
<div class="right"> right</div>
</div>
<div class="box">
<div class="border"></div>
<div class="figure"></div>
<div class="right"> right</div>
</div>
</div>
CSS:
.wrap{
position: relative;
overflow: hidden;
}
.box{
overflow: hidden;
margin-top: 50px;
}
.box:first-child{
margin-top: 0;
}
.figure{
width: 50px;
height: 50px;
background: yellow;
display: inline-block;
margin-right: 10px;
}
.right{
display: inline-block;
}
.border{
border-right: 3px solid red;
height: 100%;
left: 24px;
position: absolute;
top: 0;
width: 1px;
}
.box:last-child .border{
display: none;
}
JSFiddle:
http://jsfiddle.net/w5TY9/

Answer 1

Here you go.
WORKING DEMO
The HTML:
<div class="wrap">
<div class="box">
<div class="border"></div>
<div class="figure"></div>
<div class="right"> </div>
</div>
<div class="box">
<div class="border"></div>
<div class="figure"></div>
<div class="right"> </div>
</div>
<div class="box">
<div class="border"></div>
<div class="figure"></div>
<div class="right"> </div>
</div>
</div>
The CSS:
.wrap{
position: relative;
overflow: hidden;
}
.box{
overflow: hidden;
margin-top: 50px;
}
.box:first-child{
margin-top: 0;
}
.figure{
width: 50px;
height: 50px;
background: yellow;
display: inline-block;
margin-right: 10px;
}
.right{
display: inline-block;
}
.border {
border-right: 3px solid #FF0000;
height: 98%;
left: 24px;
position: absolute;
top: 0;
width: 1px;
z-index: -1;
}
.box:last-child .border{
display: none;
}
.figure {
background: none repeat scroll 0 0 #FFFF00;
border-bottom: 12px solid #FFFFFF;
border-top: 12px solid #FFFFFF;
display: inline-block;
height: 50px;
margin-right: 10px;
width: 50px;
}
The CSS Changes:
.border {
border-right: 3px solid #FF0000;
height: 98%;
left: 24px;
position: absolute;
top: 0;
width: 1px;
z-index: -1;
}
.figure {
background: none repeat scroll 0 0 #FFFF00;
border-bottom: 12px solid #FFFFFF;
border-top: 12px solid #FFFFFF;
display: inline-block;
height: 50px;
margin-right: 10px;
width: 50px;
}
Hope this helps.

Answer 2

.border{z-index: -1;} use this
And see link http://jsfiddle.net/bipin_kumar/w5TY9/2/

Answer 3

.figure{
width: 50px;
height: 50px;
background: yellow;
display: inline-block;
margin-right: 10px;
z-index:1;
border:3px solid white;
}
.border{
border-right: 3px solid red;
height: 100%;
left: 24px;
position: absolute;
top: 0;
width: 1px;
z-index:-1;
}
replace your classes with mine, you will get both effects

Answer 4

.border{
border-right: 3px solid red;
height: 100%;
left: 24px;
position: absolute;
top: 0;
width: 1px;
}
Class need to be added the following property and value
z-index: -1;

Answer 5

In your css you need to add the following two rules for the .border class:
z-index: -1;
margin-left: -1px
The first line puts the line behind the boxes. So in the vertical space without boxes the line shows up.
One small improvement for centering the border perfectly under the boxes:
Your border is 3px width so the border should be moved at least 1px to the left in order to stay centered. With margin-left: -1px you get the correct result. If you want the border to be completely perfect centered you should either use a border with of 4px and a margin-left of -1px or a border with of 2px and a margin-left of 1px;
see http://jsfiddle.net/w5TY9/1/

Answer 6

Add z-index=-1 to border class.
check this fiddle

Answer 7

What you want is very easy. The short version is like this:
<div style="background-color:yellow; height:30px;width:30px;"> </div>
<div style="background-color:red; height:30px; width:5px; margin-left:10px;"> </div>
In this way you have a square with background yellow and below that you have a red line
with 5px width or whatever you want.