Issue regarding printing of array elements in Ruby

Question

I have an existing rails application. In one view file I want to print 2 array elements in a particular manner. My two arrays are @itemgroups_array and @all_brands_array,where @all_brands_array is an array of arrays. For each element of @itemgroups_array the corresponding element of @all_brands_array will be printed. As I just said each element of @all_brands_array is another array and since I want to print the innermost array elements in a same line,I have used join() method. Upto this its fine.

My code is:

<% counter = 0 %>
<% @itemgroups_array.each do |ig_name|%>
  <div id="<%=ig_name%>div">
    <%=ig_name%>
    <input type="checkbox" class="check_class" id="<%=ig_name%>c" checked="true">
    <%= @all_brands_array[counter].join(" ")%>

  </div>
  <% counter = counter + 1 %>
<%end%> 

And it is giving output like this: (Conceptually)

Conveyor

Jeekay(AD) SKF

Bolt & Nut

Nirlon(AD) FAG SKF(AD)

where I have managed to print Nirlon(AD),FAG,SKF(AD) all in same line by the statement @all_brands_array[counter].join(" "). But I want to print it as follows:

Conveyor   Jeekay(AD) SKF
Bolt & Nut   Nirlon(AD) FAG SKF(AD)

ie conceptually outer array element and inner array elements in same line just like above line.

Please help me about this.

Thanks in advance!

My browser generated html for this section is:

<div id="persist">
        <div id="Conveyordiv">
            Conveyor
            <input type="checkbox" class="check_class" id="Conveyorc" checked="true">
            Jeekay(AD) SKF

        </div>
        <div id="Bolt &amp; Nutdiv">
            Bolt &amp; Nut
            <input type="checkbox" class="check_class" id="Bolt &amp; Nutc" checked="true">
            Nirlon(AD) FAG SKF(AD)

        </div>

</div>

Answer 1

Float left is the solution. Provide the div with enough width to the elements and put css property to the div as float:left.

try this:

<div id="persist">
    <div id="Conveyordiv">
      <div style='float:left'>
        Conveyor
      </div>
      <div style='float:left'>
        <input type="checkbox" class="check_class" id="Conveyorc" checked="true">
        Jeekay(AD) SKF
      </div>

    </div>
    <div id="Bolt &amp; Nutdiv">
      <div style='float:left'>
        Bolt &amp; Nut
      </div>
      <div style='float:left'>
        <input type="checkbox" class="check_class" id="Bolt &amp; Nutc" checked="true">
        Nirlon(AD) FAG SKF(AD)
      </div>
    </div>