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;
Comments
Post a Comment