Extend border line with CSS

Question

Problem:

I am trying to extend the border line of each div so it has full height, see the following picture:

enter image description here

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">&nbsp;</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.

See this SO question. The accepted answer will work for you I think. http://stackoverflow.com/questions/1205159/html-css-making-two-floating-divs-the-same-height Here is a Fiddle I made to demo this technique applied to your scenario: http://jsfiddle.net/Snf3N/1/ — Jonathan Nicol, Jun 16 '12 at 09:00
Thank you for your comment. Unfortunately, mPDF does not like the "padding-bottom: 500em; margin-bottom: -500em". It stretches the page all the way down. — kexxcream, Jun 16 '12 at 09:05

Zeta · Accepted Answer · 2012-06-16T14:15:01.337

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">&nbsp;</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

This code doesn't work, although it looks like a good solution in my eyes. This is the output I get: http://screencast.com/t/BeLHpFs7rlU — kexxcream, Jun 16 '12 at 13:34
[mPDF limitations:](http://www.mpdf1.com/mpdf/limitations) "Blocks which are defined as position:absolute, position:fixed or float:xxx are only partially supported." Since floats are also only partially supported you may have to use a table which uses only inner borders and emulate the outer border with a `
`. — Zeta, Jun 16 '12 at 13:45
I know how to get the tables in place but how would I do in order to make the table border look rounded by using divs? — kexxcream, Jun 16 '12 at 13:52
@kexxcream: Updated my answer - you add an border to every cell and delete the border where it isn't needed. It should work if mPDF understands CSS3 selectors. — Zeta, Jun 16 '12 at 14:17
It doesn't unfortunately like CSS3 selectors but otherwise it's a great solution! — kexxcream, Jun 16 '12 at 20:12

score 0 · Answer 2 · answered Jun 16 '12 at 09:38

0

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.

answered Jun 16 '12 at 09:38

cssviking

66
1

For some reason this doesn't work, I have tried to add background-image to .box1row but it does not show at all. Any suggestions? Do you have any code example? – kexxcream Jun 16 '12 at 13:31

Jonathan Nicol · Answer 3 · 2012-06-16T10:49:42.753

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.

Indeed, mPDF didn't like it at all and it got even more messy. Thank you for trying. I highly appreciate it. — kexxcream, Jun 16 '12 at 13:23

Extend border line with CSS

3 Answers3

HTML

CSS