Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Ruby

Posted by Dena G
Dena G
441 Points

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

Dena G
Dena G
441 Points

Thanks Chris!