Layout's overlapping

Vaadin 6 / 7 / 8
1

Hi! I’m a noob whit Vaddin and I was trying to make my first app whit Vaadin 7. I have a simple UI whit 2 Horizontal layout. The problem is that they overlap and i can’t understand the reason. Can someone help?

@Override
protected void init(VaadinRequest request) {
VerticalLayout vlayout = new VerticalLayout();
vlayout.setSpacing(true);
vlayout.setWidth(“100%”);

    final HorizontalLayout header = new HorizontalLayout();
    header.setWidth("100%");
    header.setSizeFull();
    header.setMargin(true);
    header.setStyleName("header");
    Label title = new Label("Esempio applicazione responsive");
    title.addStyleName("title");
    header.addComponent(title);
    
    final HorizontalLayout menuAndContent = new HorizontalLayout();
    menuAndContent.setMargin(true);
    menuAndContent.setSpacing(true);
    menuAndContent.setSizeFull();
    
    CssLayout menu = new CssLayout();
    menu.setStyleName("menu");
    Button uno = new Button("Voce uno");
    Button due = new Button("Voce due");
    Button tre = new Button("Voce tre");
    menu.addComponents(uno,due,tre);
    
    VerticalLayout content = new VerticalLayout();
    content.setSpacing(true);
    content.setMargin(true);
    content.setCaption("Contenuto della pagina");
    Label text = new Label("Put the content's text here.");
    content.addComponent(text);
    
    menuAndContent.addComponents(menu, content);
    menuAndContent.setSizeFull();
    menuAndContent.setExpandRatio(menu, 2);
    menuAndContent.setExpandRatio(content, 8);
    
    vlayout.addComponents(header,menuAndContent);
    
    setContent(vlayout);
}

Thanks :smiley: