Introduced in version 4.10, the Free Flow positioning option allows you to make your toolbars part of the HTML content of your page. This means that when a toolbar is positioned using the Free Flow option it will flow along with the contents of the page.

This sample shows one of the many cool things that you can do with the the Free Flow option: a fully resizable toolbar! Just resize your browser's window to see it in action.
As you may already know DHTML Menu Builder does not allow the creation of toolbars with variable widths which means that the toolbars will always have the same size and to change it you will have to edit your project and recompile it.
A while ago we demonstrated how this could be achieved using the "developers' edition"... unfortunately, the technique required a fairly good knowledge of javascript. This sample shows how to achieve a very similar result without having to write a single line of code.

How it works

What we did is that we created one toolbar for each menu item (Home, Download, Products, etc...) and then inserted each toolbar inside a cell in a table following the instructions on how to use the Free Flow positioning method (click here to learn more about the Free Flow option).
The result is that each toolbar item will appear inside a cell in the toolbar making it look as if it were the toolbar what was being resized; actually, what is really happening is that the toolbar is being resized and so are the cells causing the toolbar items to move along with the cells.

This is the code we used to build the table and allow the toolbars to appear inside each one of the cells:

<table border="0" width="80%" cellpadding="0" cellspacing="0" bgcolor="#E5E3D8" style="border-collapse:collapse; border:1px solid #808080;">
  <tr>
   <td id="dmbTB1ph"></td>
   <td id="dmbTB2ph"></td>
   <td id="dmbTB3ph"></td>
   <td id="dmbTB4ph"></td>
   <td id="dmbTB5ph"></td>
 </tr>
</table>