Change <div> to side by side

I have this code that displays the the elements one below the other, and I want to change the <div> so that it will be like a table with all 5 columns in one line, followed by one line for every offer:

<div class="field field-type-text field-field-offername"> <div class="field-items"> <div class="field-item odd"> <div class="field-label-inline-first"> Offer Name:&nbsp;</div> Survey </div> </div> </div> <div class="field field-type-text field-field-offerdesc"> <div class="field-items"> <div class="field-item odd"> <div class="field-label-inline-first"> Offer Description:&nbsp;</div> This is the description </div> </div> </div> <div class="field field-type-link field-field-link"> <div class="field-items"> <div class="field-item odd"> <div class="field-label-inline-first"> Offer Link:&nbsp;</div> <a href="http://www.mb01.com/lnk.asp?o=2628&amp;c=918273&amp;a=59604&amp;s1=%5Buser%5D">Click Here</a> </div> </div> </div> <div class="field field-type-number-integer field-field-bb"> <div class="field-items"> <div class="field-item odd"> <div class="field-label-inline-first"> BB:&nbsp;</div> 200 </div> </div> </div>

Would appreciate any help

 

So you want to place each div next to each other? Go to your CSS and add a float to your divs.

.example {
float: left;
}

I think thats what your asking anyway, my apologies if I misunderstood you.

 

Now it goes like this:

Offer Name:
Survey
Offer Description:
Answer a 4 page survey

I want it to be aligned like this:
Offer Name: Offer Description:
Survey Answer a 4 page survey

And I don't want to do it via CSS, but change the code itself

Hope this clears it up

 

only way i know of doing it without css and floats is by putting it in an actual table

<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

 

Thanks I considered that way but I am not sure how to place the code within the table.

Which elements should be within the first <td> and which in the second and so on...?

 

hmm could you not either use tables like this and surround it with a div tag or..

<div id="box">
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</table>
</div>

You can Float each div to the left and back sure you set specific widths to all the divs so that it does not stretch too long...

for example if your site width was 800 px the html should be like this :

<div id="wrapper">
<div id="1stcol"></div>
<div id="2ndcol"></div>
<div id="3rdcol"></div>
<div id="4thcol"></div>
<div id="5thcol"></div>
</div>

then css like this.

#wrapper { width:800px; float:left;}
#1stcol { width:160px; float:left; }
#2ndcol { width:160px; float:left; }
#3rdcol { width:160px; float:left; }
#4thcol { width:160px; float:left; }
5thcol { width:160px; float:left; }

.

I hope it works and helps you...

 

Should look something like this however i could only see 4 sections

<table>
<tr>
<td><div class="field field-type-text field-field-offername"> <div class="field-items"> <div class="field-item odd"> <div class="field-label-inline-first"> Offer Name:&nbsp;</div> Survey </div> </div> </div></td>
<td><div class="field field-type-text field-field-offerdesc"> <div class="field-items"> <div class="field-item odd"> <div class="field-label-inline-first"> Offer Description:&nbsp;</div> This is the description </div> </div> </div></td>
<td><div class="field field-type-link field-field-link"> <div class="field-items"> <div class="field-item odd"> <div class="field-label-inline-first"> Offer Link:&nbsp;</div> <a href="">Cliick Here</a> </div> </div> </div>  </td>
<td><div class="field field-type-number-integer field-field-bb"> <div class="field-items"> <div class="field-item odd"> <div class="field-label-inline-first"> BB:&nbsp;</div> 200 </div> </div> </div></td>
<td></td>
</table>

HTML: