Membuat Author Box di Bawah Post

Walaupun judulnya Membuat Author Box di Bawah Post namun cara ini bisa di terapkan di mana saja, karena widget ini RESPONSIVE. Namun posisi terbaik menurut saya adalah di bawah postingan. Keresponsivan widget ini di karenakan width yang saya buat auto. Jadinya keresponsiva nya sangat berantakan. Seperti gambar ini 

Author Box nya jadi berantakan

CSS

 .siyam-about img {
margin:0;
border:0;
}
.siyam-about {
font-size:12px;
margin:0 auto;
padding:10px;
width:auto;
background:#E4E4E4;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-webkit-box-shadow:inset #222 0 2px 8px;-moz-box-shadow:inset #222 0 2px 7px;width:auto;text-shadow:1px 0 0 #fff;margin:0 0 5px;padding:10px
border:#BBBBBB solid 1px;
min-height:130px;
}
.siyam {
padding-top:10px;
margin:0;
font-size:12px;
float:left;
width:17%;
text-align:center;
border-right:#063584 solid 1px;
}
.siyam-text {
float:right;
width: 80%;
padding:5px;
text-align:left;
font:12px arial,sans-serif;
text-align:justify;
margin:0;
padding:0;
} 

HTML (letakkan di bawah kode read more kamu, atau di bawah kode <data:post.body/>)

 <div class="siyam-about">
<div class="siyam">
<span style="font-family: Verdana,sans-serif;"><img height="80" src="http://i.imgur.com/Xd8GR.png" width="80" /> <b>Namamu</b> (Author) </span></div>
<div class="siyam-text">
<span style="font-family: Verdana,sans-serif;"><span style="font-size: large;"><b>About The Author: </b></span></span><br />
<span style="font-family: Verdana,sans-serif;"><br /></span>
<span style="font-family: Verdana,sans-serif;">Lorem ipsum dolor sit amet, choro dignissim assueverit in qui, ex laboramus torquatos eos, eius omnes primis pro eu. His falli</span><br />
<span style="font-family: Verdana,sans-serif;">Namamu di:
<b><a href="#">Twitter</a></b>|<b><a href="#">Facebook</a></b>|<b><a href="#">Google+</a></b></span></div>
</div> 

Untuk style, tulisan dan gambarnya saya rasa sudah pada bisa. Silahkan sesuaikan sendiri
Sekian post kali ini, semoga bermanfaat.