Extend border line with CSS - html

Question

Problem:
I am trying to extend the border line of each div so it has full height, see the following picture:
HTML code:
<div class="wrapper">
<div class="box1row box1top">
<div class="arrow"><img src="./img/circle_arrow_right.png" class="arrowimage"></div>
<div class="numbers">1.</div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non lacus scelerisque dui eleifend viverra. Vestibulum venenatis ornare pulvinar.</div>
</div>
<div class="box1row box1bottom">
<div class="arrow"> </div>
<div class="numbers">2.</div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non lacus scelerisque dui eleifend viverra. Vestibulum venenatis ornare pulvinar. Mauris euismod sem ornare nisi consequat quis tincidunt turpis tempor. Vivamus mollis luctus nulla sit amet consequat.</div>
</div>
</div>
CSS code:
.wrapper {
margin-bottom: 1.5em;
}
.arrow {
display: block;
float: left;
border-right: 1px solid #ddd;
width:40px;
text-align:center;
padding-top:5px;
}
.arrowimage {
width: 16px;
height: 16px;
}
.text {
display: block;
float:left;
border-left: 1px solid #ddd;
width:585px;
padding-left:5px;
margin-left: -1px;
}
.numbers {
display: block;
float:left;
border-left: 1px solid #ddd;
width:30px;
text-align:center;
margin-left: -1px;
}
.box1row {
border: 1px solid #ddd;
margin-bottom: -1px;
}
.box1top {
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}
.box1bottom {
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
Question:
How do I extend the line vertically using CSS?
Note. I am using this together with mPDF which is a class to convert HTML/CSS to PDF. mPDF does not allow border-radius to be applied to the table element, and thus I am doing a div-solution.

Answer 1

Since it's tabular data use a <table> with border-collapse:collapse and turn off all outer borders:
HTML
<div class="wrapper">
<table>
<tr>
<td class="arrow"><img src="./img/circle_arrow_right.png" class="arrowimage"></td>
<td class="numbers">1.</td>
<td class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non lacus scelerisque dui eleifend viverra. Vestibulum venenatis ornare pulvinar.</td>
</tr>
<! -- ...... -->
<tr>
<td class="arrow"> </td>
<td class="numbers">2.</td>
<td class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non lacus scelerisque dui eleifend viverra. Vestibulum venenatis ornare pulvinar. Mauris euismod sem ornare nisi consequat quis tincidunt turpis tempor. Vivamus mollis luctus nulla sit amet consequat.</td>
</tr>
</table>
</div>
CSS
/* collapse all borders */
.wrapper table{
width:100%;
border-collapse:collapse;
}
/* activate all borders */
.wrapper table td {
border:1px solid #ddd;
}
/* turn off unnecessary borders: */
.wrapper table tr:first-child td{
border-top:none;
}
.wrapper table tr:last-child td{
border-bottom:none;
}
.wrapper table tr td:last-child{
border-right:none;
}
.wrapper table tr td:first-child{
border-left:none;
}
/* other elements */
.arrow {
width:40px;
text-align:center;
padding-top:5px;
}
.arrowimage {
width: 16px;
height: 16px;
}
.text {
width:585px;
padding-left:5px;
}
.numbers {
width:30px;
text-align:center;
}
Then you can achieve the rounded borders effect by using border-radius on your .wrapper:
.wrapper {
margin-bottom: 1.5em;
border: 1px solid #ddd;
border-radius: 4px;
}
JSFiddle Demo

Answer 2

While not being a pure CSS solution, the problem can be solved by applying a 1px background-image with repeat-y to .box1row. You already have a fixed width on .number so the background-image can be positioned correctly to replace the border.

Answer 3

Given that my first suggestion (in the comments) won't work because it doesn't play nice with mPDF, another possibility is to use display:table-cell instead of floating your elements:
.wrapper {
margin-bottom: 1.5em;
}
.arrow {
display: table-cell;
width:40px;
text-align:center;
padding-top:5px;
}
.arrowimage {
width: 16px;
height: 16px;
}
.text {
display: table-cell;
border-left: 1px solid #ddd;
width:585px;
padding-left:5px;
margin-left: -1px;
}
.numbers {
display: table-cell;
border-left: 1px solid #ddd;
width:30px;
text-align:center;
margin-left: -1px;
}
.box1row {
border: 1px solid #ddd;
margin-bottom: -1px;
display: table;
}
.box1top {
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}
.box1bottom {
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
Updated demo
I'm not sure how mPDF will like that, and bear in mind that it is not IE7 compatible.
Otherwise, if your data qualifies semantically as tabular then you could mark it up as a table, which I imagine won't give mPDF any grief.