How to add a border next to an image? - html

Question

I have two divs within a larger div. The first one has an image, the second has text.
In the first div, there is a border below the image currently.
http://jsfiddle.net/8f3arq2y/
#newsfeed_header {
padding: 10px 0px;
width: 98%;
position: relative;
}
#nf_image:after {
content: " ";
border-bottom: solid 1px #000000;
display: block;
}
#nf_text {
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
font-family: Oswald;
}
<div id="newsfeed_header">
<div id="nf_image">
<img src="//dummyimage.com/35x35" />
</div>
<div id="nf_text">Read the latest</div>
<br/>
</div>
However I'd like the border to be next to the image, how can I do that?
|<img>__________________|
|text |

Answer 1

Here is how you can do it, also works with dynamic image size.
#nf_image {
display: table;
width: 100%;
margin-bottom: 10px;
}
#nf_image img {
display: table-cell;
vertical-align: top;
}
#nf_image:after {
display: table-cell;
content: "";
width: 100%;
border-bottom: solid 1px black;
}
UPDATED DEMO
#newsfeed_header {
padding: 10px 0px;
width: 98%;
position: relative;
}
#nf_image {
display: table;
width: 100%;
margin-bottom: 10px;
}
#nf_image img {
display: table-cell;
vertical-align: top;
}
#nf_image:after {
display: table-cell;
content: "";
width: 100%;
border-bottom: solid 1px black;
}
#nf_text {
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
font-family: Oswald;
}
<div id="newsfeed_header">
<div id="nf_image">
<img src="//dummyimage.com/35x35" />
</div>
<div id="nf_text">Read the latest</div>
<br/>
</div>

Answer 2

You could use an empty div below the image to do this:
#newsfeedheader{
padding: 10px 0px;
width: 98%;
position: relative;
}
#border {
margin-top: -8px;
margin-bottom: 10px;
border-top: 2px solid red;
z-index: -10;
}
#nf_text{
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
font-family: Oswald;
}
<div id="newsfeed_header">
<div id="nf_image"><img src="http://www.pixelsquish.com/wp-content/gallery/random-impulses/the-arch-jumpers.jpg" height="105" /></div>
<div id="border"></div>
<div id="nf_text">Read the latest</div>
<br/>
</div>
You give the div a negative top margin and a negative z-index so that it appears behind the image. That way the border you put on the div appears to be next to the image.

Answer 3

GOT IT!
I added a margin-left equal to the width of the image to the :after block. The bottom border now only starts immediately after the image.