Clever Geek Handbook

Vertical line between two constrained div heights

I am trying to set a vertical line between two div

s. But I don't want it to have the same height as div

s. I have to say that 10% was cut at the top and 10% was cut at the bottom.

.container {
  display: table;
  border: 1px solid blue;
}
.line {
  padding-right: 20px;
  border-right: 1px solid #cfc7c0;
}
.first {
  display: table-cell;
  width: 30%;
}
.second {
  display: table-cell;
  width: 30%;
  padding-left: 10px;
}
      

        
        
        
      

    
<div class="container">
  <div class="first line">this is first div and some text</div>
  <div class="second">
    Right
    <br/>and more
    <br/>Side
  </div>
</div>
Run codeHide result


http://jsfiddle.net/VKqEU/124/

Please suggest how to do this?

+3


source to share


3 answers


You can try using a pseudo element ::after

.

.line {
    position: relative;
}
.line:after {
    content: '';
    position: absolute;
    right: 0;
    border-right: 1px solid #cfc7c0;
    top: 10%;
    bottom: 10%;
}

      

        
        
        
      

    


.container {
    display: table;
    border: 1px solid blue;
}
.line {
    padding-right: 21px; /* 20+1 */
    position: relative;
}
.line:after {
    content: '';
    position: absolute;
    right: 0;
    border-right: 1px solid #cfc7c0;
    top: 10%;
    bottom: 10%;
}
.first {
    display: table-cell;
    width: 30%;
}
.second {
    display: table-cell;
    width: 30%;
    padding-left: 10px;
}
      

        
        
        
      

    
<div class="container">
    <div class="first line">this is first div and some text</div>
    <div class="second">
        Right
        <br/>and more
        <br/>Side
    </div>
</div>
Run codeHide result


+7


source


To do this you need to add some additions to the .container: http://jsfiddle.net/VKqEU/127/



.container{ display : table; border : 1px solid blue; padding: 10% 0; }

0


source 


.container{
   display : table;
    border : 1px solid blue;
    height:150px;
}

.line:after {
    content:"";
    position: absolute;
    top:20px;
    bottom:0;
    left: 50%;
    height:120px;
    border-right: 2px dotted #ff0000;
}

FIDDLE

http://jsfiddle.net/VKqEU/135/

0


source






More articles:


All Articles