UIBinder - problem with damaged layout

[Magnus]

Hello,

I am trying to build my first user interface using UIBinder and I am having 
problems with the layout. It looks like this:

https://picasaweb.google.com/104334857964624808900/21September2012?authuser=0&feat=directlink

(The ui.xml is attached below.)

The red area on the right has a fixed width and contains a button. The 
green area on the left should take all the remaining width.

The green area contains a  3 DecoratorPanels:
- "Beteiligung"
- "Status"
- "Turnier"

The first two should have a fixed size, while the third ("Turnier") should 
grow with the window witdh.

I have built the whole widget as follows:
- an outer LayoutPanel
- three layers with a HTMLPanel
- the interiors of the HTMLPanels with Horizontal/VerticalPanels and so on.

The whole GUI looks damaged, but I don't know how to fix it.

I would appreciate any help!

Thanks
Magnus

-----

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent";>
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">


    <ui:style>
        .layer {
            background-color: red;
        }
        .innerlayer {
            background-color: green;
        }

        .tournamentText {
            border: solid 1px black;
        }


        .label {
            background-color: orange;
            margin-right: 70px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .button {
            width: 50px;
            float: right;
        }

        .clear {
            clear: right;
        }
    </ui:style>
    
    <g:LayoutPanel>

         
           <g:layer top="5" bottom="5" left="5" width="200px">
            <g:HTMLPanel styleName="{style.innerlayer}">
            <g:HorizontalPanel height="100%">
            <g:DecoratorPanel>
            <g:VerticalPanel>
            <g:HTML wordWrap="true">Beteiligung</g:HTML>
            <g:CheckBox text="eigene"/>
            <g:CheckBox text="fremde"/>
            </g:VerticalPanel>
            </g:DecoratorPanel>
            <g:DecoratorPanel>
            <g:VerticalPanel>
            <g:HTML wordWrap="true">Status</g:HTML>
            <g:CheckBox text="aktiv"/>
            <g:CheckBox text="geplant"/>
            <g:CheckBox text="beendet"/>
            </g:VerticalPanel>
            </g:DecoratorPanel>
            </g:HorizontalPanel>

            </g:HTMLPanel>
           </g:layer>
           
           <g:layer top="5" bottom="5" left="205" right="140px">
            <g:HTMLPanel styleName="{style.innerlayer}">
            <g:DecoratorPanel width="100%">
            <g:VerticalPanel>
            <g:HTML wordWrap="false">Turnier</g:HTML>
            <g:CheckBox text="Turnier"/>
            <g:HTML wordWrap="true" 
styleName="{style.tournamentText}">XXX</g:HTML>
            </g:VerticalPanel>
            </g:DecoratorPanel>
                
            </g:HTMLPanel>
           </g:layer>
           
           
        <g:layer top="20" right="20" width="100px" bottom="20px">
            <g:HTMLPanel styleName="{style.layer}">
                <div>
                    <g:Button addStyleNames="{style.button}">&gt;</g:Button>
                    <div class="{style.clear}"></div>
                </div>
            </g:HTMLPanel>
        </g:layer>

    </g:LayoutPanel> 

</ui:UiBinder> 

-- 
You received this message because you are subscribed to the Google Groups 
"Google Web Toolkit" group.
To view this discussion on the web visit 
https://groups.google.com/d/msg/google-web-toolkit/-/OgpSUjOCTVYJ.
To post to this group, send email to google-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to 
google-web-toolkit+unsubscr...@googlegroups.com.
For more options, visit this group at 
http://groups.google.com/group/google-web-toolkit?hl=en.