I'd like to know how to dynamically change my CSS styling based on the number of elements in my database.
Users can choose a certain number of columns, and the number of columns they choose determines the width of the columns (obviously the more columns chosen, the smaller the width of each column would be so that they are evenly spaced horizontally across the page.
How do you do something like this?
Sounds like a good use of ahem TABLEs!
The issue is you can't do this by changing the CSS, you need to change the HTML
<table width="100%">
<tr>
<td>..</td> (repeat for the number of columns)
</tr>
</table>
By default all table cells (TD) will be of equal width.
You need to dynamically assign styles in your .html.erb. You can use, tables, divs, lists - whatever you want. Just assign different classes depending on the number of columns (class="small", class="wide") and define those in your CSS file OR (possibly less pretty) you can use inline-styles.
For example, in this code I assign the width of an element (to do a five-star rating):
<ul class="stars floatstars">
<li class="yellowstars" style="width: <%= @article.avg_rating * 25 %>px !important;"></li>
<li class="text"><%= @article.avg_rating %> average from <%= pluralize(@article.count_ratings, "vote") %></li>
</ul>
Edit: if you set the class as a variable in the controller this would be an example for the view:
<li class=<%= @myclass %>>...</li>
