Organize div horizontally

My URL: illandeistudio

If you scroll halfway down you will see a list of categories (Accessories, dinning, lighting...)

They are currently vertical. How can I get these to display horizontally? Optimally they would be 4 per line. Below is the PHP code which 开发者_开发百科places all the "categories" into a div "nelson"

Thanks! This has been hell!

---

.nelson {
     float: left;
     padding: 0 3px;
}

Then just style the padding from there. You can replace padding: 0 3px; with width: 80px; and adjust it from there if you want the columns to be even (might look better).

If you want it to be centered with 4 columns (you have 7 items so it would be 4 columns, 2 rows, and the last column would only have 1 row).... not sure why you would want it like that but its possible. You would create a around the code you wrote, create a width, and add the attribute:

style="margin: 0 auto; width: 916px;"

Then you would adjust the width of that to be the product of 7 * the width of .nelson

I'd recommend just adjusting padding though and leave the menu going horizontally. all the way across for all 7 items.

---

use like :

<?php if (count($this->document->shoppica_categories_arr) > 0) : ?>
   <ul id="categories">
   <?php $i = 0; ?>
   <?php foreach ($this->document->shoppica_categories_arr as $category): ?>
       <?php $i++ ?>
       <li <?php if ($i % 4 == 0) : ?> class="ln"<?php endif ?>><?php echo $category->getName() ?></li>
   <?php endforeach ?>
   </ul>
<?php endif ?>

css file :

ul#categories li {
   float: left;
}
ul#categories li.ln {
   clear: left;
}

---

What Tallboy said. :) You may also need to set a width for the .nelson divs to get them floating correctly and lining up.