Позиционирование 2 значка вне DIV, выровненное вверх

Question

Я хотел бы достичь чего-то похожего на картинку ниже (2 значка, почта и телефон за пределами моей статьи DIV (в белом на изображении), выровнены в верхней части DIV и друг под другом (с 1 или 2 пикселя в пространстве). Я попытался установить класс с отрицательным запасом для изображений, но без успеха. что было бы лучшим способом для достижения этой цели? Большое спасибо

.article { 
    clear: right; 
    float: right; 
    text-align:justify; 
    width: 450px; 
    min-height:420px; 
    height: 60%; 
    padding: 50px 32px 49px 62px; 
    margin-right:75px; 
    position: relative; 
    z-index: 15; 
    margin-top: 90px; 
    background: #fff; 
    /* max-width: 25%; */ 
    overflow-y: scroll!important; 
} 

Answer 1

Я использовал бы position: relative на изделии и position: absolute позиционирование на значке (я использую г а ul для простоты):

JSFiddle: http://jsfiddle.net/szLsH/

HTML код:

<article> 
    <div id="icons"> 
     <ul> 
      <li></li> 
      <li></li> 
     </ul> 
    </div> 
    <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac libero velit. Proin euismod erat non diam malesuada ac semper purus dapibus. Donec id suscipit metus. Ut eu auctor mauris. Proin sed felis dui. Maecenas congue dapibus dolor, sodales feugiat nisi feugiat ac. Nulla nec massa in mi pharetra sollicitudin. Aliquam eu dui quis odio porttitor viverra ut cursus dui. Nullam quis tristique magna. Aliquam erat volutpat. Suspendisse potenti. Pellentesque rhoncus commodo odio vitae tincidunt. Praesent rutrum, nibh vitae porta luctus, felis quam dignissim risus, non tempus lectus magna non odio. Donec commodo laoreet dolor ut volutpat. Ut lobortis lobortis augue, in placerat arcu dapibus et. Maecenas vitae lectus quis enim suscipit euismod. 
    </p> 
</article> 

CSS:

article { 
    width: 200px; 
    margin: 0 auto; 
    position: relative; 
    padding: 10px; 
    border: 1px solid #AAA; 
} 

#icons { 
    position: absolute; 
    right: 100%; 
    top: 0; 
} 
#icons ul { 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
} 
#icons li { 
    width: 50px; 
    height: 50px; 
    background: blue; 
    margin: 0 5px 5px; 
}