Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

Ruby

Horizontal alignment

Right now my users are displaying vertically and staggered towards the right. I would like them to display horizontally side by side. I know this is a very simple to do however, I am having a hard time getting it to be how I would like. Thank you in advance.

User/Index

<div class="page-header"> <center><strong><h1> All Users </h1></strong></center> </div>

<div class="col-md-offset-4 col-med-8">
  <% @users.each do |user| %>
  <div class="user horizontal-align">
     <%= link_to image_tag(user.avatar.url(:thumb)), user %>
     <br><%= link_to user.name, user %></br>
        <% if current_user.admin %>
     <%= link_to "Delete", user, method: :delete, data: { confirm: "Are you sure?" } %>

    <% end %>
  <% end %>
 </div>

<div class="center">
<%= will_paginate @users, renderer: BootstrapPagination::Rails %>
</div>
</div>

User CSS

.user {
margin: 0.2%;
display: inline-block;
horizontal-align: right;
margin-left:90px;
margin-right:90px; 
height: 200px;
width: 200px; 
}

1 Answer

Chris Malcolm
Chris Malcolm
2,909 Points

Make sure your wrapper "col-md-offset-4 col-med-8" is wide enough for the amount of user elements you output, otherwise your inline-blocks will be put on the next 'line'. Also your horizontal-align css might be tampering with your user class. Also its text-align not horizontal-align. And to make the inline-blocks, make sure to also include vertical-align:top to ensure they all line up side to side.

Otherwise it should work fine, see here: http://codepen.io/anon/pen/Frkbj

Thanks Chris!