I am trying to create a screen layout that has three sections, the top two of which are a fixed size, and the last of which should expand to fill the remaining space on the screen. I'm using a VerticalLayoutContainer (VLC), which contains three HorizontalLayoutContainers (HLCs). I've attempted to control the size of the HLCs using VerticalLayoutData definitions. I don't want to specify a fixed height for the HLCs because I don't know what they will contain until runtime. The problem that I'm having is that the HLCs are all being placed at position 0,0 in the VLC, and are thus overlaying one another. Here's what this looks like (it's a mess!):

VLC.jpg

Here's the UiBinder code that I'm using:

Code:
<!DOCTYPE ui:UiBinder SYSTEM 'http://dl.google.com/gwt/DTD/xhtml.ent'>
<ui:UiBinder
  xmlns:gwt='urn:import:com.google.gwt.user.client.ui'
  xmlns:gxtbutton='urn:import:com.sencha.gxt.widget.core.client.button'
  xmlns:gxtcontainer='urn:import:com.sencha.gxt.widget.core.client.container'
  xmlns:gxtform='urn:import:com.sencha.gxt.widget.core.client.form'
  xmlns:gxt='urn:import:com.sencha.gxt.widget.core.client'
  xmlns:ui='urn:ui:com.google.gwt.uibinder'>
  <!-- VerticalLayoutData declarations ============================================ -->
  <ui:with
    type='com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer.VerticalLayoutData'
    field='fillRemainingLayoutData'>
    <ui:attributes height='1' width='1'/>
  </ui:with>
  <ui:with
    type='com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer.VerticalLayoutData'
    field='sizeToContentsLayoutData'>
    <ui:attributes height='-1' width='1'/>
  </ui:with>
  <!-- ================================================================== -->
  <gxtcontainer:Viewport>
    <gxtcontainer:VerticalLayoutContainer>
      <gxtcontainer:child layoutData='{sizeToContentsLayoutData}'>
        <gxtcontainer:HorizontalLayoutContainer>
          <gxtcontainer:VerticalLayoutContainer>
            <gxtform:FieldLabel text='Person.FirstName'/>
          </gxtcontainer:VerticalLayoutContainer>
          <gxtcontainer:VerticalLayoutContainer>
            <gxtform:FieldLabel text='Person.EmailAddress'/>
          </gxtcontainer:VerticalLayoutContainer>
        </gxtcontainer:HorizontalLayoutContainer>
      </gxtcontainer:child>
      <gxtcontainer:child layoutData='{sizeToContentsLayoutData}'>
        <gxtcontainer:HorizontalLayoutContainer>
          <gxtbutton:TextButton text='Save Changes'/>
          <gxtbutton:TextButton text='Undo Changes'/>
        </gxtcontainer:HorizontalLayoutContainer>
      </gxtcontainer:child>
      <gxtcontainer:child layoutData='{fillRemainingLayoutData}'>
        <gxtcontainer:HorizontalLayoutContainer>
          <gxtcontainer:VerticalLayoutContainer>
            <gxtbutton:TextButton text='Organizations'/>
            <gxtbutton:TextButton text='Relationships'/>
          </gxtcontainer:VerticalLayoutContainer>
          <gxtcontainer:CardLayoutContainer>
            <gxt:ContentPanel headerVisible='false'/>
          </gxtcontainer:CardLayoutContainer>
        </gxtcontainer:HorizontalLayoutContainer>
      </gxtcontainer:child>
    </gxtcontainer:VerticalLayoutContainer>
  </gxtcontainer:Viewport>
</ui:UiBinder>
And just for completeness, here's the UiBinder Java class:
Code:
import com.google.gwt.core.client.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Widget;

public class PersonDetailsWidget extends Composite {

interface PersonDetailsWidgetUiBinder extends UiBinder<Widget, PersonDetailsWidget> { //
}

public PersonDetailsWidget() {
  final PersonDetailsWidgetUiBinder uiBinder = GWT.create(PersonDetailsWidgetUiBinder.class);
  initWidget(uiBinder.createAndBindUi(this));
}
}

And here's the entry point class:
Code:
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootLayoutPanel;

public class GXTGrid implements EntryPoint {

@Override
public void onModuleLoad() {
  final PersonDetailsWidget personDetailsWidget = new PersonDetailsWidget();
  RootLayoutPanel.get().add(personDetailsWidget);
}
}

I'm very open to any suggestions for alternative/"correct" approaches to this! Many thanks!