How to arrange the page in absolute size

My code is


public class Header extends Panel {

	public Header() {
		
		setHeight("100px");
		setWidth("100%");
	}
}

public class TopMenu extends Panel {

	public TopMenu() {
		
		setHeight("50px");
		setWidth("100%");
	}
}

public class LeftMenu extends Panel {

	public LeftMenu() {
		
		setHeight("100%");
		setWidth("300px");
	}
}

public class Body extends Panel {

	public Body() {
		
		setHeight("100%");
		setWidth("100%");
	}
}

public class MainApplication extends Application {

	public MainApplication() {
		// TODO Auto-generated constructor stub
	}

	@Override
	public void init() {

		Window mainWindow = new Window("Vaadin Application");
		
		VerticalLayout verticalLayout = new VerticalLayout();
		verticalLayout.setSizeFull();
		verticalLayout.addComponent(new Header());
		verticalLayout.addComponent(new TopMenu());
		
		GridLayout gridLayout = new GridLayout(2, 1);
		gridLayout.setSizeFull();
		Panel leftMenu = new LeftMenu();
		Panel body = new Body();
		gridLayout.addComponent(leftMenu);
		gridLayout.addComponent(body);
		verticalLayout.addComponent(gridLayout);
		mainWindow.addComponent(verticalLayout);
		
		mainWindow.setBorder(0);
		setMainWindow(mainWindow);
	}
}

My output is

But i wants like

how it possible

please give the solution