2

I have a div/box. I'm trying to create a vertical line within that div. I tried using border-right, but for some reason the line doesn't extend all the way to fit my div.

enter image description here

Since the class of my div is section

.section {
    border-right: 2px solid #c9cacb;
}

HTML

<hr style="height: 100pt; visibility: hidden;" />
<div class="container summary">
    <div class="row">
        <div class="col-xs-1 section">
            <br>
            <p>
                Section
                    <br>
                <span class="section-num">2.2</span>

                <br>
                Exercise
            </p>
        </div>
        <div class="col-xs-3">
            <br>
            <div class="row cb-btns-row " style="background-color: white;">
                <div class="col-xs-3 col-xs-3 col-md-3 col-lg-3">
                    <div id="dd" class="wrapper-dropdown-1" tabindex="1">
                        <span class="summary-texts">Group A </span>

                        <ul class="dropdown">
                            <li><a class="group" id="group-a">Group A </a>

                            </li>
                            <li><a class="group" id="group-b">Group B </a>

                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <p style="text-align: left;" class="summary-texts">
                <br>
                Problem set: Same
                    <br>
                Start: 4/10/2015 2:00 pm
            </p>
        </div>
        <div class="col-xs-5">
            <br>
            <br>
            <br>
            <p style="text-align: left;" class="summary-texts">
                Students: 9/25
                    <br>
                Due: 4/10/2015 3:00 pm
            </p>
        </div>
        <div class="col-xs-1 student-submit">
            <br>
            <span class="student-submit-num">9/9</span>

            <br>
            STUDENTS
                <br>
            SUBMITTED
        </div>
        <div class="col-xs-1 avg-score">
            <br>
            <span class="avg-score-num">71 <small>% </small></span>

            <br>
            AVG SCORE
        </div>
        <div class="col-xs-1 hide-details">
            <br>
            <img src="http://s13.postimg.org/5xe0gy3pv/Screen_Shot_2015_05_26_at_11_40_40_AM.png" width="40">
            <br>
            HIDE
                <br>
            DETAILS
        </div>
    </div>
</div>

Here is my JSFiddle

What is the most practical way to add a vertical line inside a div ?

Community
  • 1
  • 1
code-8
  • 54,650
  • 106
  • 352
  • 604
  • a CSS border or an image. define practical :P – odedta Jun 01 '15 at 14:38
  • A CSS border is probably the right way to go. Your question would then be something more like [How to Force Child Div to 100% of Parent's Div Without Specifying Parent's Height?](http://stackoverflow.com/questions/1122381/how-to-force-child-div-to-100-of-parents-div-without-specifying-parents-heigh) – James Thorpe Jun 01 '15 at 14:39
  • 2
    Also, using `br` tags for spacing is not a good option. Use margins and / or padding....that's what they are for. – Paulie_D Jun 01 '15 at 14:41
  • @Paulie_D : Thanks for your advice. Will do. – code-8 Jun 01 '15 at 14:45
  • http://jsfiddle.net/fkoc0k3v/8/ – fuzzybear Jun 01 '15 at 14:49

3 Answers3

0

I added this CSS:

.section-row{
    overflow:hidden;
}
.section{
    margin-bottom:-9999px;
    padding-bottom:9999px;
}

And the new class to

  <div class="row section-row">
        <div class="col-xs-1 section">

See it work here

This is the generally accepted method for making bootstraps columns an equal height.

HTH, -Ted

Ted
  • 14,757
  • 2
  • 41
  • 58
0

Since you marked it Jquery:

Here is some jquery code that should do the trick

$().ready( function () {
    var rowheight = $(".row").height();
    $('.section').height(rowheight);
});

Basically forces the div to have the same height as the row div (its container).

Note: It's not a very elegant solution, if the row's size changes this will fail. So you could bind that code to an event that resizes the row.

CSS:

I find using relative widths and heights is the most fool proof way:

.parent-class
{
height:100%; //MATCHES BODY, OR IT's CONTAINER
height:200px; //IT'S OWN FIXED HEIGHT
height:auto; //SIZES TO WHATEVER IS INSIDE
}
.child-class
{
height:100%; //MATCHES THE .parent-class HEIGHT
}
Community
  • 1
  • 1
Terrance00
  • 1,658
  • 1
  • 20
  • 29
0

If you don't mind adding a few lines of jquery, here is the working demo:

DEMO http://jsfiddle.net/fkoc0k3v/9/

JQUERY

$(document).ready(function(){
    $('.row').each(function(){
        $(this).find('.section').css({'height':$(this).outerHeight()});
    });
});
Community
  • 1
  • 1
yeyene
  • 7,297
  • 1
  • 21
  • 29