css - Div picture cut out of div box -


i adapting webdesign, when found problem , couldn't slove on own.

i coded heading , article picture, both in same div, border @ bottom of div. problem: border comes right after title , doesn't integrate picture.

check out fiddle see mean: click me!

here code:

<div class="latestarticle">    <a class="articletitle" href="#" >guitar hero experts melt face off</a>  <div class="articlepicture"> </div>  

and css:

.latestarticle {  border-bottom: solid 1px #ccc; padding: 0px; margin-top: 12px; font-size: 12px;  }   .articletitle {    color: #cd5700; text-decoration: none;  font-weight: bold;  font-size: 14px;   margin-bottom: 5px;  } .articlepicture { height: 76px; width: 136px; float: left; margin-top: 12px; margin-right: 9px; border: solid #a3a3a3 2px; }  

i'm wondering why not working. should work, anyway, add display: table; or display: table-cell; .latestarticle. works fine. see demo

edit

oh! came know problem happening because have floated left .articlepicture , hope wanted demo.

i have added <div class="articlegroup"></div> .articlepicture div , defined display: inline-block;

demo


Comments

Popular posts from this blog

c# - Send Image in Json : 400 Bad request -

javascript - addthis share facebook and google+ url -

ios - Show keyboard with UITextField in the input accessory view -