BorderLayout weird resize behavior

I tried to implement a Border Layout utilizing CustomLayout.

The setup code in the main application:

 final Window window2 = new Window("Border Layout");
        window2.setWidth("400px");
        window2.setHeight("200px");
        window2.showNotification("Hello");
        BorderLayout layout = new BorderLayout();
		window2.setContent(layout);
        Button northButton = new Button("North");
        northButton.setWidth("100%");
		layout.addComponent(northButton, BorderLayout.NORTH);
        Button westButton = new Button("West");
        westButton.setSizeFull();
        westButton.setWidth("100");
		layout.addComponent(westButton, BorderLayout.WEST);
        Button centerButton = new Button("CENTER");
        centerButton.setWidth("100%");
		layout.addComponent(centerButton, BorderLayout.CENTER);
		Button eastButton = new Button("East");
		eastButton.setSizeFull();
		eastButton.setWidth("100");
		layout.addComponent(eastButton, BorderLayout.EAST);
		Button southButton = new Button("South");
		southButton.setWidth("100%");
		layout.addComponent(southButton, BorderLayout.SOUTH);
        
        window.addWindow(window2);

And the code for the border layout itself:


public class BorderLayout extends CustomLayout {
	private static final long serialVersionUID = -2351509286455569801L;

	public static String NORTH = "north";
	public static String WEST = "west";
	public static String CENTER = "center";
	public static String EAST = "east";
	public static String SOUTH = "south";
	
	public BorderLayout() {
		super();
		try {
			initTemplateContentsFromInputStream(
				new ByteArrayInputStream(("<table width='100%' height='100%' border=0 padding=0>"
					+ "<tr style='padding: 0px;'><td colspan='3' style='padding: 0px;'><div location='north'></div></td></tr>"
					+ "<tr height='100%' style='padding: 0px;'><td style='padding: 0px;'><div location='west'></div></td>"
					+ "<td width='100%' style='padding: 0px;'><div location='center'></div></td>"
					+ "<td style='padding: 0px;'><div location='east'></div></td></tr>"
					+ "<tr><td colspan='3' style='padding: 0px;'><div location='south'></div></td></tr></table>").getBytes()));
		}
		catch(IOException e) {
		}
		setSizeFull();
	}
}

When one resizes the window in both Chrome and Firefox one will notice that sometimes the width is set wrongly and also the buttons gets annotated with height:0. Sometimes everything is done nicely so I guess its not a matter of the way I set it up but the relayout layout script code.