css - How to put a vertical separator in the middle of span4? -

i'm using twitter-bootstrap framework , i'm trying put vertical separator between 3 span4.

so coded this

to see result more clear if enter here

css

.span4 {     border-right: 2px solid red;     background: grey;     text-align: center;     height: 400px;     color: white; } .span4:last-child {     border-right: none; } 

html

<div class="container">     <div class="row-fluid">         <div class="span4">hello</div>         <div class="span4">stack</div>         <div class="span4">overflow</div>     </div> </div> 

---

as can see border @ end of span, not in middle of them... have line different length span4 , vertical centered.

any advice or tip appreciated.

if need more info, let me know , i'll edit post.

you'd need fiddle bootstrap margins. default bootstrap style adds margin-left of 20px [class*="span"] elements, meaning display is:

[margin][element] [margin][element] [margin][element] 

in order border directly between margins you'll need bit hacky , introduce new divider between .span4 , content within.

   <div class="span4">         <div class="inner">             hello         </div>     </div>     <div class="span4">         <div class="inner">             stack         </div>     </div> 

.row-fluid .span4 {     border-right: 2px solid red;     height: 400px;     margin:0; } .span4:last-child {     border-right: none; } .inner {     margin:0 10px 0 10px;     text-align: center;     color: white;     background: grey;     height:100%; } 

here rough mock up: http://jsfiddle.net/v6qgm/5/