0
195
ViewsHTML CSS Vertical Line with exact height of a div
I've got a div element with some content (shown in the picture). I want (for styling purposes) create a vertical line next to it with the exact same height (needs to be responsive so a static "height" value isnt working)
Does anybody have ideas?
·
Juan Pablo Isaza
3 answers
Answer question0
Option #1 - Set Border of Outer Element
.content {
border-left: 2px solid #000;
padding: 0 0.5rem;
}
.content p {
max-width: 80%;
}<div class="content">
<p>
Petierunt uti sibi concilium totius Galliae in diem certam indicere. Morbi fringilla convallis sapien, id pulvinar odio volutpat. A communi observantia non est recedendum.
Non equidem invideo, miror magis posuere velit aliquet. Quisque placerat facilisis egestas cillum dolore. Curabitur blandit tempus ardua ridiculus sed magna. Contra legem facit qui id facit quod lex prohibet. Petierunt uti sibi concilium totius Galliae in diem certam indicere.
</p>
</div>Option #2 - Create Element with Full Height
.content {
display: flex;
align-items: center;
flex-direction: row-reverse;
height: 10rem;
}
.content .line {
height: 100%;
width: 2px;
background: #000;
margin-right: 0.5rem;
}<div class="content">
<p>
Petierunt uti sibi concilium totius Galliae in diem certam indicere. Morbi fringilla convallis sapien, id pulvinar odio volutpat. A communi observantia non est recedendum.
Non equidem invideo, miror magis posuere velit aliquet. Quisque placerat facilisis egestas cillum dolore. Curabitur blandit tempus ardua ridiculus sed magna. Contra legem facit qui id facit quod lex prohibet. Petierunt uti sibi concilium totius Galliae in diem certam indicere.
</p>
<div class="line"></div>
</div>
·
Juan Pablo Isaza
Report
0
Put a div inside your container, make your container relative and make that div absolute with top and bottom as 0.
.container{
position: relative;
}
.line{
width: 4px;
background-color: red;
position:absolute;
top: 0;
bottom:0;
}
·
Juan Pablo Isaza
Report
0
You can attain it using a simple border on the left.
.mytext {
border-left:3px solid red;
padding-left:15px;
}<div class="mytext">
<h1>Head<h1>
<p>text here</p>
<p>text here</p>
<p>text here</p>
<p>text here</p>
<p>text here</p>
<p>text here</p>
<p>text here</p>
</div>
·
Juan Pablo Isaza
Report
Answer question