[css]Jak automatycznie rozciągać divy?

[disaster]

Siemka
Słuchajcie zarzuciłem opencarta i chcę przerobić trochę moją templatkę. Obecnie górna belka kategorii jest jako cała, na całej szerokości sklepu. Ja chciałbym podzielić ją np na 5 części, równych, ale tak,żeby były rozciągnięte na całej szerokości sklepu/strony.

Problem w tym, że nie kumam jak to zrobić. Pomoże ktoś? Stronka na której wrzuciłem sklep to znajdzdostawce.pl

Plik css, który zmieniałem to catalog/view/theme/default/stylesheet/stylesheet.css:

Kod:

#menu {
       width: auto;
       background: #585858;
       border-bottom: 1px solid #000000;
       height: 37px;
       margin-bottom: 15px;
       -webkit-border-radius: 5px 5px 5px 5px;
       -moz-border-radius: 5px 5px 5px 5px;
       -khtml-border-radius: 5px 5px 5px 5px;
       border-radius: 5px 5px 5px 5px;
       -webkit-box-shadow: 0px 2px 2px #DDDDDD;
       -moz-box-shadow: 0px 2px 2px #DDDDDD;
       box-shadow: 0px 2px 2px #DDDDDD;
       padding: 0px 5px;
       float: left;
       margin-right: 20px;
    }

i na jego końcu dodałem:

Kod:

.clearfix {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
}

/* IE hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* IE hack */

Zmieniłem również część kodu w catalog/view/theme/default/template/common/header.tpl

Kod:

<?php if ($categories) { ?>
<div id="menu">
  <ul>
    <?php foreach ($categories as $category) { ?>
    <li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
      <?php if ($category['children']) { ?>
      <div>
        <?php for ($i = 0; $i < count($category['children']);) { ?>
        <ul>
          <?php $j = $i + ceil(count($category['children']) / $category['column']); ?>
          <?php for (; $i < $j; $i++) { ?>
          <?php if (isset($category['children'][$i])) { ?>
          <li><a href="<?php echo $category['children'][$i]['href']; ?>"><?php echo $category['children'][$i]['name']; ?></a></li>
          <?php } ?>
          <?php } ?>
        </ul>
        <?php } ?>
      </div>
      <?php } ?>
    </li>
    <?php } ?>
  </ul>
</div>
<?php } ?>

na:

Kod:

<?php if ($categories) { ?>
    <?php foreach ($categories as $category) { ?>
    <div id="menu">
      <ul>
        <li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
          <?php if ($category['children']) { ?>
          <div>
            <?php for ($i = 0; $i < count($category['children']);) { ?>
            <ul>
              <?php $j = $i + ceil(count($category['children']) / $category['column']); ?>
              <?php for (; $i < $j; $i++) { ?>
              <?php if (isset($category['children'][$i])) { ?>
              <li><a href="<?php echo $category['children'][$i]['href']; ?>"><?php echo $category['children'][$i]['name']; ?></a></li>
              <?php } ?>
              <?php } ?>
            </ul>
            <?php } ?>
          </div>
          <?php } ?>
        </li>
      </ul>
    </div>
    <?php } ?>
    <div class="clearfix"></div>
    <?php } ?>

Tylko efekt nie jest taki jak oczekiwałem, bo belki kategorii są od lewej