title: hbox/vbox alignment issues in ZK framework
body: <p>I'm having some issues with Hbox and Vbox layout.
  I know they behave somewhat like DIVs, but I just can't alignt them the way I want.</p>
  
  <p>I have tried to add DIVs, separators, pack, align, width, every kind of workaround, but can't seem to make it work.</p>
  
  <p>This is the north of my layout, and I just want it in two pieces:
  The left one, that contains the most part of the components, it's all align to the left with some spacement</p>
  
  <p>And the right one, that will just have some exporting options, and it's all centralized.</p>
  
  <p>I'd post an image, but I don't have enought rep.</p>
  
  <p>Here is the part of code I'm trying to make work:  </p>
  
  <pre><code>    &lt;hbox width="100%"&gt;
          &lt;vbox width="80%"&gt;
                  &lt;hbox&gt;
                      &lt;label value="${labels.processos}" /&gt;
                          &lt;separator spacing="20px" /&gt;
                      &lt;combobox id="cmbNovo" model="@load(vm.loadCombobox)"
                              readonly="true"&gt;
                          &lt;comboitem label="@load(each)" /&gt;
                      &lt;/combobox&gt;
                          &lt;separator spacing="20px" /&gt;
                      &lt;a onClick="@command('editar', status=each)"
                                  label="${labels.alterarvisao}"/&gt;
                          &lt;separator spacing="20px" /&gt;
                      &lt;button id="novaVisao" label="${labels.novavisao}"
                          onClick="@command('novo')" /&gt;
                          &lt;separator spacing="20px" /&gt;
                  &lt;/hbox&gt;
                      &lt;separator height="10px" /&gt;
                      &lt;button id="novo" label="${labels.message.novoprocesso}"
                          onClick="@command('novo')" /&gt;
                      &lt;separator height="10px" /&gt;
                  &lt;/vbox&gt;
                      &lt;separator spacing="100%" /&gt;
                  &lt;vbox pack="end" align="end" width="20%" &gt;
                      &lt;hbox &gt;
                          &lt;label value="${labels.common.exportar}" /&gt;
                      &lt;/hbox&gt;
                      &lt;hbox&gt;
                          &lt;label value="${labels.common.exportar}" /&gt;
                          &lt;a onClick="@command('editar', status=each)"
                                  label="${labels.common.pdf}"/&gt;
                          &lt;a onClick="@command('editar', status=each)"
                                  label="${labels.common.xls}"/&gt;
                      &lt;/hbox&gt;
                      &lt;hbox&gt;
                          &lt;label value="${labels.common.exportar}" /&gt;
                          &lt;a onClick="@command('editar', status=each)"
                                  label="${labels.common.pdf}"/&gt;
                          &lt;a onClick="@command('editar', status=each)"
                                  label="${labels.common.xls}"/&gt;
                      &lt;/hbox&gt;
                  &lt;/vbox&gt;
              &lt;/hbox&gt;
  </code></pre>
  
  <p>It's pretty simple.
  I need one div to the left, text aligned to the left aswell
  And another one to the right, with centralized text.
  Both on the sime horizontal lign.
  I just can't make it happend.</p>