CODEWITHSUNDEEP
csshtml-lists
purplerice
purplerice

Reputation: 473

CSS/Ruby on Rails - break list into three separate equal width columns

What's the best way to achieve something like this in a Ruby on Rails view with CSS:

This is what I have now:

List Item 1 - is not too long enter image description here enter image description here
List Item 2 - very,very long and I don't want the "column" to be this large; I want it to wrap enter image description here enter image description here
List Item 3 - hello enter image description here enter image description here

This is what I want:
enter image description here

The List Items come from a Solution class; the thumbs up/down are votes that come from a Solution_votes class.

Ideally, I would use a table with 3 columns, however, I am also using Axaj and JQuery to update and want to use an unordered list (to easily update using $('#items_list').prepend(new_item);).

Upvotes: 0

Views: 240

Answers (1)

mogelbrod
mogelbrod

Reputation: 2315

HTML:

<ul class="entries">
  <li>
    <span class="title">List Item 1 - is not too long</span>
    <a class="thumb down">0 Votes Down</a>
    <a class="thumb up">0 Votes Up</a><!-- float:right will place this to the left -->
  </li>
  ...
</ul>

CSS:

ul.entries { list-style: none; }
ul.entries li {
  margin: 10px 0;
  border: 2px solid black;
  border-radius: 6px;
  width: 600px;
}
ul.entries .title {
  float: left;
  width: 380px;
}
ul.entries .thumb {
  float: right;
  margin-left: 20px;
  width: 90px;
  /* todo: color, background + padding-left declarations for thumb icons */
}

Upvotes: 1

Related Questions