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>
http://jsfiddle.net/VKqEU/124/
Please suggest how to do this?
+3
manish
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>
+7
Oriol
source
to share
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
developerdayo
source
to share
.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
Manjunath siddappa
source
to share