Question

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

Answer 1

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.