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


i have 2 divs within larger div. first 1 has image, second has text.

in first div, there border below 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 latest</div>      <br/>  </div>

however i'd border next image, how can that?

|<img>__________________| |text                   | 

here how can it, works 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 latest</div>      <br/>  </div>


Comments

Popular posts from this blog

How to provide Authorization & Authentication using Asp.net, C#? -

toolbar - How to add link to user registration inside toobar in admin joomla 3 custom component -

How to use Authorization & Authentication in Asp.net, C#? -