Layout/Sizing In Split Pane

Hi,

I'm trying to get a standard SplitPane layout going : links, grouped together in functional areas on the left, and "content" on the right. In this example, I'm going to use Panel to group together some Buttons.

I want the panel to have 100% of the width of the left-hand-side of the split bar - but crucially, I want to have a margin around each panel so that it's not hard against the edge. If I leave it with no margin, that's fine (see attachment no-margin), but if I add a (silly 50px, for examples sake) margin to the panels, we don't get the "expected" behaviour (see with-margin attachment). I wanted to get the edge of the panel 50px from both left AND right hand sides of the left-hand container.

I suspect it's something to do with the dynamic size calculation; in our real application, we're actually using a CustomComponent instead of Panel, but I can reproduce the same behaviour with Panel. How should I go about fixing/tackling this?

Cheers,

Charles

public class WidthIssueApp extends Application{

	@Override
	public void init() {
		setTheme("issue");

		VerticalLayout mainLayout = new VerticalLayout();
		mainLayout.setSizeFull();

		SplitPanel splitPane = new SplitPanel(SplitPanel.ORIENTATION_HORIZONTAL);		
		splitPane.setSizeFull();
				
		VerticalLayout container = new VerticalLayout();
		container.setStyleName("panel-container");
		
		for (int i = 0; i < 2; i++) {
			Panel panel = new Panel("Panel " + i);						
			panel.setWidth("100%");			

			for (int j = 0; j < 5; j++) {
				Button b = new Button("Button " + j);
				b.setWidth("100%");
				panel.addComponent(b);
			}			
			container.addComponent(panel);
		}		
		Label dummyContent = new Label("Dummy Content");
		splitPane.setFirstComponent(container);
		splitPane.setSecondComponent(dummyContent);								
		Window window = new Window();		
		window.setContent(splitPane);		
		setMainWindow(window);		
	}		
}

issues/styles.css :

.panel-container .v-panel {
	margin : 50px;
}