How to create borders in bootstrap when div is 0 height - html

Question

Using Twitter-Bootstrap, I have a section of a page that includes a sidebar (which does not take up the whole page, just spans down to the bottom of this section). I have several sections to the right of the sidebar, each of which contain an image on one side, some text on the other, and require a bottom-border.
I'm having trouble with the bottom-border. Since each section is contained in a div, and everything's floated using Bootstrap columns, the divs are 0 height and the borders all float to the top.
EDITED for clarification: I need two distinct columns in this section - a left-hand one (spanning 3 columns) that contains only the sidebar (and takes up the 3 columns all the way to the bottom, leaving blank space after the list), and one (spanning the remaining 9 columns) that contains the story-sections but that stays on the right-hand side of the page.
EDITED to include image (grey lines are included for reference and will not show up on the page, black lines are the borders I'm trying to apply)
Attempted solutions:
Bottom-border on individual elements: I need one solid line across the bottom of each section, so I can't apply bottom-border to both the image and the text.
Clearfix: Since I have this sidebar, I can't use a clearfix, because it pushes everything down past the sidebar.
Overflow: Using overflow causes the images to shrink (which I don't quite understand, but it doesn't help with the border either).
How can I create bottom borders for each of these sections?
<section class="stories">
<div class="container">
<h2>Section header</h2>
<div class="col-sm-3 sidebar">
<h6>list of stories</h6>
<ul>
<li>list-item</li>
<li>list-item</li>
<li>list-item</li>
<li>list-item</li>
</ul>
</div>
<section class="story-section">
<div class="col-sm-3">
<img src="http://placehold.it/330x220">
</div>
<div class="col-sm-6">
<h6>keyword</h6>
<h3>Header of section</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eleifend dictum neque sed laoreet ...</p>
</div>
</section>
// (there are three more sections with the same class of "story-sections", plus other code on the page, but I've tried to simplify it as much as possible here.)
</div>
</section>
css:
html, body {
height: 100vh;
}
.stories {
.sidebar {
height: 100vh;
}
.story-section {
border-bottom: 1px solid $grey;
}
}
I'm still fairly new with Bootstrap, so there may be a very simple solution, but I haven't been able to track it down. Any help is very welcome!

Answer 1

if you want to have a sidebar with 3 columns + a left section with the remaining 9 columns, then you need to set col-*-9 in your story-section
Note: in bootstrap, you need to have .row right below .container or between nested col-*
html,
body {
height: 100vh;
}
.sidebar {
height: 100vh;
background: lightblue
}
.story-section {
border-bottom: 1px solid grey;
}
img {
margin-top: 10px
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<section class="stories">
<div class="container">
<div class="row">
<h2>Section header</h2>
<div class="col-xs-3 col-sm-3 sidebar">
<h6>list of stories</h6>
<ul>
<li>list-item</li>
<li>list-item</li>
<li>list-item</li>
<li>list-item</li>
</ul>
</div>
<section class="story-section col-xs-9 col-sm-9">
<div class="row">
<div class="col-xs-6 col-sm-6">
<img class="img-responsive" src="http://placehold.it/330x220">
</div>
<div class="col-xs-6 col-sm-6">
<h6>keyword</h6>
<h3>Header of section</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eleifend dictum neque sed laoreet ...</p>
</div>
</div>
</section>
<section class="story-section col-xs-9 col-sm-9">
<div class="row">
<div class="col-xs-6 col-sm-6">
<img class="img-responsive" src="http://placehold.it/330x220">
</div>
<div class="col-xs-6 col-sm-6">
<h6>keyword</h6>
<h3>Header of section</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eleifend dictum neque sed laoreet ...</p>
</div>
</div>
</section>
</div>
</div>
</section>