CODEWITHSUNDEEP
htmlcss
katie
katie

Reputation: 2951

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

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

Upvotes: 0

Views: 525

Answers (3)

Clint C.
Clint C.

Reputation: 688

span.picture {
    display: block;
    float: left;
    margin-right: 10px;
}

Upvotes: 0

carl crott
carl crott

Reputation: 753

.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

Upvotes: 1

Joe
Joe

Reputation: 82594

Here's a basic example: http://jsfiddle.net/GU2aM/ to get you started.

Upvotes: 0

Related Questions