CODEWITHSUNDEEP
cssasp.net-mvc-3html
charlie_cat
charlie_cat

Reputation: 1850

How to use css to display an avatar pic with details next to it?

i have this part of html in my view:

 <div class="info">    
   <img width="52" height="52" alt="Avatar" src="/ThemeFiles/Base/images/User/user-avatar.png"/> 
 </div>
 <ul class="links">
    <li>
       <%: newsItem.CommentDate %>
    </li>
    <li>
       <%: ViewBag.UserName %>
    </li>
 </ul>

i have my avatar showing with the newsItem.CommentDate and ViewBag.UserName underneath the avatar. How can i get the date and username to display NEXT TO the avatar??

thanks

Upvotes: 1

Views: 711

Answers (3)

Darin Dimitrov
Darin Dimitrov

Reputation: 1038930

Try floating the avatar div to the left.

Upvotes: 1

Gaz Winter
Gaz Winter

Reputation: 2989

Have you tried making it two divs and then using float: left on the first div

  <div class="info">    
     <img width="52" height="52" alt="Avatar" src="/ThemeFiles/Base/images/User/user-avatar.png"/> 
  </div>

   <div class="linkscontainer">
          <ul class="links">
            <li>
               <%: newsItem.CommentDate %>
            </li>
            <li>
               <%: ViewBag.UserName %>
            </li>
          </ul> 
      <div>

Upvotes: 0

Andras Zoltan
Andras Zoltan

Reputation: 42353

This is one way:

div.info { display: inline-block; width:52px; height:52px; }
ul.links { display: inline-block; }

You might have to do some tweaking, though, if you want them to line-up in a certain way (one way being to give ul.links a fixed height, along with some padding-top.

You can also use float: left in place of display:inline-block for browsers that don't understand it.

With floats, though, you then have to consider what happens to elements following them - with inline-block elements you don't.

Upvotes: 2

Related Questions