<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="issue-list-container" class="container"> <div class="issue-item"> <div class="issue-inner"> <div class="issue-head clearfix"> <div class="avatar pull-left"> <a href="./index.php?qa=user&qa_1=Oleg+Kolesnichenko"><img id="main-page-avatar" class="media-object img-circle" src="https://ssl.gstatic.com/accounts/ui/avatar_2x.png"> </a> </div> <div class="issue-detail"> <h5 class="issue-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus fermentum iaculis mi, non dapibus nulla eleifend sed. Etiam ac commodo leo.Donec non sem id tellus mattis convallis. Morbi dapibus nulla ac dui lacinia</h5> <div class="post-meta"> <span class="issue-number">#12344</span> <span class="qa-issue-when">opened 7 days ago by</span> <span class="user-login"><a href="./index.php?qa=user&qa_1=Oleg+Kolesnichenko">Oleg Kolesnichenko</a></span> </div> </div> </div> <span id="time-stamp" class="badge">Posted 2012-08-02 20:47:04</span> <div class="pull-right"> <span class="label label-default">alice</span> </div> </div> </div> <div class="issue-item"> <div class="issue-inner"> <div class="issue-head clearfix"> <div class="avatar pull-left"> <a href="./index.php?qa=user&qa_1=Oleg+Kolesnichenko"><img id="main-page-avatar" class="media-object img-circle" src="https://ssl.gstatic.com/accounts/ui/avatar_2x.png"> </a> </div> <div class="issue-detail"> <h5 class="issue-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus fermentum iaculis mi, non dapibus nulla eleifend sed. Etiam ac commodo leo.Donec non sem id tellus mattis convallis. Morbi dapibus nulla ac dui lacinia</h5> <div class="post-meta"> <span class="issue-number">#12344</span> <span class="qa-issue-when">opened 7 days ago by</span> <span class="user-login"><a href="./index.php?qa=user&qa_1=Oleg+Kolesnichenko">Oleg Kolesnichenko</a></span> </div> </div> </div> <span class="badge">Posted 2012-08-02 20:47:04</span> <div class="pull-right"> <span class="label label-default">alice</span> </div> </div> </div> </div>

.issue-item { margin-bottom: 25px; margin-left: 40px; position: relative; } .issue-item .issue-inner { background: #fff; border: 1px solid #ddd; border-radius: 3px; padding: 10px; position: relative; } .issue-item .issue-inner:before { border-right: 10px solid #ddd; border-style: solid; border-width: 10px; color: rgba(0,0,0,0); content: ""; display: block; height: 0; position: absolute; left: -20px; top: 6px; width: 0; } .issue-item .issue-inner:after { border-right: 10px solid #fff; border-style: solid; border-width: 10px; color: rgba(0,0,0,0); content: ""; display: block; height: 0; position: absolute; left: -18px; top: 6px; width: 0; } .issue-item:before { background: #fff; border-radius: 2px; bottom: -30px; box-shadow: 0 0 3px rgba(0,0,0,0.2); content: ""; height: 100%; left: -30px; position: absolute; width: 3px; } .issue-item:after { background: #fff; border: 2px solid #ccc; border-radius: 50%; box-shadow: 0 0 5px rgba(0,0,0,0.1); content: ""; height: 15px; left: -36px; position: absolute; top: 10px; width: 15px; } .clearfix:before, .clearfix:after { content: " "; display: table; } .issue-item .issue-head { margin-bottom: 8px; padding-bottom: 8px; } .issue-item .issue-head .avatar { margin-right: 20px; } .issue-item .issue-head .issue-detail { overflow: hidden; } .issue-item .issue-head .issue-detail h5 { font-size: 16px; margin: 0; margin-bottom:10px; } .issue-item .issue-head .post-meta { float: left; padding: 0 15px 0 0; } .issue-item .issue-head .post-meta >div { color: #333; font-weight: bold; text-align: right; } .post-meta > div { color: #777; font-size: 12px; line-height: 22px; } .issue-item .issue-head .post-meta >div { color: #333; font-weight: bold; text-align: right; } .post-meta > div { color: #777; font-size: 12px; line-height: 22px; } #main-page-avatar { min-height: 60px; max-height: 60px; } #time-stamp{ margin-left:80px; }