How to align a picture,name and the post with css like facebook does?


Tags: html,css

Problem :

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{     }


Solution :

.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


    CSS Howto..

    PHP / CSS How to work with themes for my site? [closed]

    How to disable CSS minifier in Liferay?

    How to get Style From jQuery in angular2

    How can I expand a div to compensate for removing the bordering div's margin?

    How to make a CSS table with use of DIV UL LI

    How to NOT select only specific elements in a table with jQuery?

    Show/Hide H4's isn't working

    How should I approach the solution to develope a static, Responsive HTML file that seems to have functionality beyond CSS/HTML capabilities?

    Show/Hide tr elements based on multiple CSS classes and input from multiple checkboxes

    How to overlay a form field over an image with a fixed width?

    how to make div background image responsive

    draggable without jquery ui: how to stop dragging the not-draggable and type-able elements?

    css how to align a graphic on page

    How does one create a div that extends to the bottom of the page?

    How can i change or remove title and page address?

    How can I indent all text in a paragraph except the first line?

    How do you avoid class name collisions? [closed]

    How to use Font Awesome for checkboxes etc

    How can I make a designer's static web page run in rails 4

    Handle text as elements, how to hide with CSS?

    How to set border to 0 in this table

    Google Font API uses browser detection. How to get all font variations for font-face

    How to use background image in CSS?

    How to change the font-size uniformly?

    how to make the textarea's width fixed but keep the height flexible CSS

    How to make a table scrollable with fixed header?

    How to animate CSS resize?

    How can I edit adjacent selector to a nested one

    how to create a table layout with float in css

    How to include a custom CSS file in TYPO3