Hi there,

I am trying to display a number of columns on a navigation panel. However, I would not know how many columns there are to be displayed till a (PHP) DB query is done.

I want to display them spaced out, in equal widths, across the navigation panel. If the number of items to be displayed changes, then I want the spacing to dynamically change to still fill the navigation panel. I am not having much luck doing this.

The (PHP) code to query the DB table and then display the contents is as follows:

  <div class="nav">
    <?php $sql="SELECT id,page_title from tbl_dynamic_pages where parent='0' and status='1' ORDER BY sort1 ASC LIMIT 11";
      $Sql_row=mysql_query($sql); 
    ?>  
    <div id="navigationContainer">
      <table width="947px">
        <tr>
        <td>
        <ul>
        <?php while($paren_query=mysql_fetch_array($Sql_row))
          {?>
           <li><a href="pages.php?id=<?php echo $paren_query['id'];?>" class="dirV"><?php echo $paren_query['page_title'];?></a>
        <ul>
        <?php 
          $sql_child =  "SELECT id ,page_title from tbl_dynamic_pages where parent='".$paren_query['id']."' and status='1' order by sort1 ASC";
          $Sql_row_child=mysql_query($sql_child); 
        ?>
        <?php while($child_query=mysql_fetch_array($Sql_row_child))
        {?>
          <li>
          <a href=pages.php?id=<?php echo $child_query['id'];?>  class="dirV"><?php echo $child_query['page_title'];?></a>  
          </li>
        <?php }?>
          </ul>         
          </li>
        <?php }?>
        </ul>  
        </td>
        </tr>
      </table>
    </div>
    <div class="clear"></div>
  </div>  

The definitions in the CSS files are:

#navigationContainer {
  height:35px;
  position:relative;
  z-index: 597;
  margin-left: 15px;
  margin-right: 40px;
  padding-left: 0px;
  padding-right: 0px;
  margin-top: 0px;
  width: 947px;
}
#navigationContainer a.dirV 
{
    background-position: 94% 50%;
    background-repeat: no-repeat;
}
.nav{
  background-color: #2A2E35;
  border: 1px solid #474B52;
  border-radius: 8px 8px 1px 1px;
  height: 41px;
  position: absolute;
  width: 990px;
  z-index: 1;
  margin-top:0px !important;
  }
.nav ul{}
.nav ul li{
  color: #FFFFFF;
    float: left;
    font-family: Tahoma,Geneva,sans-serif;
    font-size: 12px;
    padding-top: 4px;
  }
.nav ul li a{
  color: #7b7c7e;
  }
.nav ul li a:hover{
  color: #0C0;
  }

In short, I would like the items to span the width of the navigation panel. Also, automatically re-size, not necessarily the font size, should the number of items change.

I am new to this, so please be gentle (patient) with the explanation.

Thank you.