Question

I am trying to align a full name,picture and the post just like they do in most social networks (linked-in or facebook).But i cant align them the well.Can anybody please try to fill the gaps with necessary css commands?Thank you in advance.

<div>
 <span class="picture"> <img src="/assets/images/rails.png"/></span> 
  <a  href="#" class="user-name">user-full-name</a>
 <span class="post"></span>
 </div>  

css

 .picture{height:40px;
         width:40px;
         } 

  .user-name{
         margin-bottom:35px;
            }
   .post{     }

Answer 1

.inline_table{
  display: inline-table;
  position: relative;
}

is another property you might want to look at … any element which has both position relative AND inline table .. will be aligned left to right butted up against each other.

so in this example:

<div id="profile_picture" class="inline_table">
<div id="profile_name" class="inline_table">
<div id="profile_post" class="inline_table">

will all be aligned along the same row