Trouble with multiple layouts

Hello everyone!

Can someone show how to work with multiple layouts on one page? I’m stucked with mine (check description). Almost completed design except ‘contentArea’ which displays under leftPanel. but it should display above… i don’t know how to design correctly…
My Code:

[size=2]
public class BaseView extends VerticalLayout{
    VerticalLayout rootLayout = new VerticalLayout();
    HorizontalLayout menuLayout = new HorizontalLayout();
    VerticalLayout leftPanel = new VerticalLayout();
    VerticalLayout contentArea = new VerticalLayout();
    
    public BaseView() {
        addComponent(rootLayout);
        rootLayout.addComponent(menuLayout);
        rootLayout.setExpandRatio(menuLayout,0.15F);
        menuLayout.setSizeFull();
        
        rootLayout.addComponent(leftPanel);
        rootLayout.setExpandRatio(leftPanel, 0.20F);
        leftPanel.setSizeFull();
        
        rootLayout.addComponent(contentArea);
        contentArea.setSizeUndefined();
        rootLayout.setComponentAlignment(contentArea, Alignment.TOP_LEFT);   //even this won't work
    }
}
[/size]

What should i accomplish:
https://www.dropbox.com/s/l7fcjol27nk0cjc/exampleLayout.jpg?dl=0

ATM: menuLayout and leftPanel works fine.

Some Definitions to screenshot:
UserBar = menuLayout
Panel = leftPanel
Content Area = contentArea

Thanks for the help!

Your rootLayout is a VerticalLayout, which means that every component you add there will be stacked vertically. That’s why your contentArea is below leftPanel. In order to get leftPanel and contentArea to be side-by-side you need to wrap them into HorizontalLayout. So something like this:

rootLayout (VL)
\-> menuLayout(HL)
\-> wrapper(HL)
      \-> leftPanel(VL)
      \->contentArea(VL)

Thank you very much!
I knew it’s gonna be simply, but not like that! :smiley: