LayoutPanelはコンパイルされるとどうなるか

LayoutPanelと、LayoutじゃないPanelを混在させると、意図したレイアウトにならないことが多くて困ってます。
どうもちゃんと理解できていないので、理解をすすめるべく、コンパイルされたhtmlを見てみることにします。

以下で、DockLayoutPanelでJavaのコードとhtmlコード両方を確認してみます。

Javaコード

		DockLayoutPanel panel = new DockLayoutPanel(Unit.PX);
		panel.setStyleName("panel");
		panel.addWest(new Button("west-100"), 100);
		panel.add(new Button("center"));
		RootLayoutPanel.get().add(panel);

コンパイルされたhtml

コメントは、後から挿入したものです。

        <!-- RootLayoutPanel start-->
        <div style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; ">
            <div style="position: absolute; z-index: -32767; top: -20ex; width: 10em; height: 10ex; ">&nbsp;</div>
            <div style="position: absolute; overflow-x: hidden; overflow-y: hidden; left: 0px; top: 0px; right: 0px; bottom: 0px; ">
                <!--  DockLayoutPanel start -->
                <div style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; " class="panel">
                    <div style="position: absolute; z-index: -32767; top: -20ex; width: 10em; height: 10ex; ">&nbsp;</div>
                    
                    <!--  west start (※1) -->
                    <div style="position: absolute; overflow-x: hidden; overflow-y: hidden; left: 0px; top: 0px; bottom: 0px; width: 100px; ">
                        <button type="button" class="gwt-Button" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; ">
                            west-100
                        </button>
                    </div>
                    <!--  west end -->
                    
                    <!--  center start(※2) -->
                    <div style="position: absolute; overflow-x: hidden; overflow-y: hidden; left: 100px; top: 0px; right: 0px; bottom: 0px; ">
                        <button type="button" class="gwt-Button" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; ">
                            center
                        </button>
                    </div>
                    <!--  center end -->
                </div>
                <!--  DockLayoutPanel end -->
            </div>
        </div>
        <!--  RootLayoutPanel end -->

基本はposition:absoluteで四方に0pxが指定されたものをベースに構成されているようです。
west要素(※1)とcenter要素(※2)が要注目です。素のLayoutpanelはtop/bottom/left/rightの四方に0pxが指定されます。
これに対し、west要素のdivはright指定がなく、代わりにwidthがsizeで指定した値になっています。
また、center要素のdivはwestのsize100pxぶんをleftに指定しています。
これでDockLayoutのようなことが実現されているのですね。