Layout problem

[peter tong]

I want to make the two image side by side and the label under the two image, I try to use the method mentioned in
Moving to Standards Mode
which said

use FlowPanel, and to use the float: left; CSS property on its children

to simulate the effect of HorizontalPanel, but fail, the label is next to the image.
Also, the image could not auto resize according to my setSize method on image widget.

image1.setSize("100px", "100px");

so many white space is left,
how to solve these two problems?

the relevant code is attached as follows:

public class TestFlowPanelLeft extends FlowPanel {
	
	public void onLoad(){
		Image image1 = new Image();
		image1.setUrl("/images/smallImg1.JPG");
		image1.setSize("100px", "100px");
		image1.setStyleName("floatLeft");
		Image image2 = new Image();
		image2.setUrl("/images/smallImg2.JPG");
		image2.setSize("100px", "100px");
		image2.setStyleName("floatLeft");
		FlowPanel flowPanel1 = new FlowPanel();		
		flowPanel1.addStyleName("yellowcolor");		
		flowPanel1.add(image1);
		flowPanel1.add(image2);
		this.add(flowPanel1);
		this.addStyleName("orangecolor");
		Label label = new Label("see");
		this.add(label);
	}

}

.floatLeft{
	float:left;	
}
.orangecolor{
	background-color:orange;	
}
.yellowcolor{
	background-color:yellow;	
}

public class GWTDesignerFirst implements EntryPoint {
	public void onModuleLoad() {
             RootPanel rootPanel = RootPanel.get();		
             final SplitLayoutPanel splitLayoutPanel = new SplitLayoutPanel();
             rootPanel.add(splitLayoutPanel, 0, 0);
             splitLayoutPanel.setSize("1024px", "768px");
		
             TabPanel tabPanel = new TabPanel();
              tabPanel.setStylePrimaryName("gwt-TabPanel");		
              splitLayoutPanel.addWest(tabPanel, 300);
              TestFlowPanelLeft testFlowPanelLeft = new TestFlowPanelLeft();
              splitLayoutPanel.add(testFlowPanelLeft);
               ....
       }
}