# Ruby Catalog how to list sideways **URL:** \ **Category:** Rails\ **Created:** [August 11, 2008, 2:04pm UTC](https://www.ruby-forum.com/t/ruby-catalog-how-to-list-sideways/145552 "2008-08-11T14:04:12Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![tyliong](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/t/e9a140/32.png) [@tyliong](https://www.ruby-forum.com/u/tyliong)\ **Post date:** [August 11, 2008, 2:04pm UTC](https://www.ruby-forum.com/t/ruby-catalog-how-to-list-sideways/145552/1 "2008-08-11T14:04:12Z")
Hi when i use \<% for groceries in @groceries %\> in the html file what i get when i list objects is this: #(object 1) #(object 2) #(object 3) #(object 4) what i want is this # # # # (end of page) # # # # (end of page) how do i code this type of listing? ---
**Author:** ![tyliong](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/t/e9a140/32.png) [@tyliong](https://www.ruby-forum.com/u/tyliong)\ **Post date:** [August 11, 2008, 4:50pm UTC](https://www.ruby-forum.com/t/ruby-catalog-how-to-list-sideways/145552/2 "2008-08-11T16:50:56Z")
tyliong wrote: > Hi > > when i use \<% for groceries in @groceries %\> in the html file what i > get when i list objects is this: > > #(object 1) > #(object 2) > #(object 3) > #(object 4) > > what i want is this > > # # # # (end of page) > > # # # # (end of page) > > how do i code this type of listing? If you are using a a list - - … You can have a style that says .my\_list{display: inline;} and that will display all the elements in a row on the page and not on different lines. -S ---
**Author:** ![tyliong](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/t/e9a140/32.png) [@tyliong](https://www.ruby-forum.com/u/tyliong)\ **Post date:** [August 15, 2008, 8:21am UTC](https://www.ruby-forum.com/t/ruby-catalog-how-to-list-sideways/145552/3 "2008-08-15T08:21:49Z")
I am kinda of a newbie to css as well. Could u show an example of setting an inline css div and how it works in the .html.erb file? On Aug 11, 10:50 pm, Shandy N. [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) ---
**Author:** ![tyliong](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/t/e9a140/32.png) [@tyliong](https://www.ruby-forum.com/u/tyliong)\ **Post date:** [August 15, 2008, 8:14pm UTC](https://www.ruby-forum.com/t/ruby-catalog-how-to-list-sideways/145552/4 "2008-08-15T20:14:20Z")
> I am kinda of a newbie to css as well. Could u show an example of > setting an inline css div and how it works in the .html.erb file? > Actually, the example shown in the previous post does show your both the > HTML and CSS. The example is not using a > > but rather an unordered > list > with list items - which is then styled to be rendered > inline .my\_list {display: inline;}. However, you are likely going to need some additional styles applied to get the effect that you’re after. Like the one to turn off the bullets on the list items (list-style-type: none;} and you may need to adjust margins and padding {margin: 0; padding: 0}. In a ideal world it would be great if you could use {display: inline-block;} that would render each list item as a block rather than inline, but still render horizontally. IMPORTANT: display: inline-block; is not yet well supported, even by modern browsers. I found that Safari 4.0 (Dev Preview) does support it, but Firefox 3.0 does not. Also note that I personally use {float:left;} rather than {display: inline;} Which achieves a very similar effect as {display: inline-block;}, but is better supported by current browsers. tyliong wrote: > I am kinda of a newbie to css as well. Could u show an example of > setting an inline css div and how it works in the .html.erb file? > > On Aug 11, 10:50�pm, Shandy N. [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) ---
**Author:** ![tyliong](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/t/e9a140/32.png) [@tyliong](https://www.ruby-forum.com/u/tyliong)\ **Post date:** [August 16, 2008, 9:27am UTC](https://www.ruby-forum.com/t/ruby-catalog-how-to-list-sideways/145552/5 "2008-08-16T09:27:35Z")
Will this work with tables? each of my objects # is actually a small table On Aug 16, 2:14 am, Robert W. [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) ---
**Author:** ![tyliong](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/t/e9a140/32.png) [@tyliong](https://www.ruby-forum.com/u/tyliong)\ **Post date:** [August 16, 2008, 1:59pm UTC](https://www.ruby-forum.com/t/ruby-catalog-how-to-list-sideways/145552/6 "2008-08-16T13:59:45Z")
Update: I got what u guys mean. been learning a bit of css. the next question is: how do i get this to work with \<% @groceries.each do |i| %\> I want it to look something like this below: [http://l.yimg.com/g/images/en-us/tour/organize\_1.jpg](http://l.yimg.com/g/images/en-us/tour/organize_1.jpg) a picture with the image and words beside it then have the search results displayed in a grid manner Is using a table the wrong way going about representing each element in the page? If so how should i represent each element? ---
**Author:** ![tyliong](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/t/e9a140/32.png) [@tyliong](https://www.ruby-forum.com/u/tyliong)\ **Post date:** [August 16, 2008, 6:13pm UTC](https://www.ruby-forum.com/t/ruby-catalog-how-to-list-sideways/145552/7 "2008-08-16T18:13:20Z")
Solved. this one is so unbelievably simple. {float:left} ---
**Author:** ![tyliong](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/t/e9a140/32.png) [@tyliong](https://www.ruby-forum.com/u/tyliong)\ **Post date:** [August 16, 2008, 10:24am UTC](https://www.ruby-forum.com/t/ruby-catalog-how-to-list-sideways/145552/8 "2008-08-16T10:24:56Z")
Update: I got what u guys mean. been learning a bit of css. the next question is: how do i get this to work with \<% @groceries.each do |i| %\>