title: How to layout widgets using DockLayoutPanel and UiBinder in GWT 2.0?
body: <p>I'm trying to get a simple layout working under GWT 2.0 using UiBinder. The layout I'm trying to get is one that mimic Java's BorderLayout in where you can specify different panels in the north, south, east, west and center directions; for that I'm using DockLayoutPanel. I would like to get a header and footer, both with fixed width. The remaining viewport space would be occupied by the widget assigned to the DockLayoutPanel center slot.</p>
  
  <p>The current .ui.xml file I've got is:</p>
  
  <pre><code>&lt;g:DockLayoutPanel unit='EM'&gt;
      &lt;g:north size='2'&gt;
          &lt;g:HTML&gt;HEADER&lt;/g:HTML&gt; 
      &lt;/g:north&gt;
  
      &lt;g:south size='2'&gt;
          &lt;g:HTML&gt;FOOTER&lt;/g:HTML&gt; 
      &lt;/g:south&gt;
  
      &lt;g:center&gt;
          &lt;g:HTML&gt;
              &lt;div id='loginform'&gt;Hello!&lt;/div&gt;
          &lt;/g:HTML&gt;
      &lt;/g:center&gt;
  &lt;/g:DockLayoutPanel&gt;
  </code></pre>
  
  <p>The browser only renders HEADER at the top left corner. How can I achieve the layout I'm looking for? It seems that there's more CSS you've got to know before you can use GWT layout panels, but that kind of defeats the purpose of creating the UI with it.</p>