html - CSS Having trouble with negative margin -

before use negative margin : html:

<div class="blog-piece">     <div class="blog-letter">         <div class="blog-letter1">4.12</div>         <div class="blog-letter2">css</div>     </div>     <div class="blog-piece-content">         <p class="blog-content-headp">this heading of article</p>         <p class="blog-content-shead">this heading of article</p>         <p class="blog-content-mainp">this heading of articlethis heading of articlethis heading of articlethis heading of articlethis heading of articlethis heading of articlethis heading of articlethis heading of articlethis heading of articlethis heading of articlethis heading of articlethis heading of articlethis heading of articlethis heading of articlethis heading of articlethis heading of articlethis heading of articlethis heading of article</p>         <p class="blog-content-footerp">your name 2015-06-01</p>     </div> </div> 

css:

    .blog-letter{     width: 55px;     float: left; }      .blog-letter1{         background-color: #522a5c;         text-align: center;         width:55px;         height: 40px;     } 

and result(firefox):

now set blog-letter's margin -55px(which it's width),but blog-letter disappeared . following code after fixed: css:

    .blog-letter{     width: 55px;     float: left;     margin-left: -55px; } .blog-letter1{     background-color: #522a5c;     text-align: center;     width:55px;     height: 40px; } 

but didn't work(it disappeared),i want set blog-letter out of main content,like this:

how can negative margin?

depending on whether there space available left of div.blog-piece, here's 2 ways achieve want:

if space available, position div.blog-letter absolute outside div.blog-piece, needs have position: relative; work way expect to.

if no space available, give .blog-piece-content margin-left: 55px;.

see both solutions in action here:

http://codepen.io/anon/pen/kpwwbe

if reason solution 1 makes div.blog-letter disappear, must div.blog-piece or container surrounding has overflow: hidden;.