How to horizontally align component with CSSLayout in Vaadin7?

Question

I need to use CssLayout. I have several components. I can't find a way to align these components to the right regardless what I do.

In my theme I used this: align-content: flex-end; or this

justify-content: flex-end;

among many others.No result. Is there a way to align components in Vaadin7 if somebody uses CSSLayout?

private Component addUpperStripe() {
    CssLayout cssLayout = new CssLayout();
    cssLayout.setWidth("100%");
    cssLayout.setStyleName("stripestyle");

    Label userNameLabel = new Label("User:" + currentUserName);
    userNameLabel.setSizeUndefined();
    cssLayout.addComponent(userNameLabel);
    userNameLabel.setStyleName("leftPosition");

    Label dateLabel = new Label(new Date().toString());
    dateLabel.setSizeUndefined();
    cssLayout.addComponent(dateLabel);
    dateLabel.setStyleName("centerPosition");

    Label versionLabel = new Label("Version:" + versionString);
    versionLabel.setSizeUndefined();
    cssLayout.addComponent(versionLabel);
    versionLabel.setStyleName("rightPosition");

    return cssLayout;
}




 .stripestyle {
       background-color: #336699;
       line-height: 36px;
       vertical-align: bottom;
       align-content: space-between;
    }




  .rightPosition {
     ? WHAT TO WRITE HERE??????????????????
   }

   .leftPosition {
   }

   .centerPosition {
   }

Answer 1

Use float and text-align properties to align components inside CssLayout. SSCCE:

@Override
protected void init(VaadinRequest request) {
    setContent(addUpperStripe());
}

private Component addUpperStripe() {
    CssLayout cssLayout = new CssLayout();
    cssLayout.setWidth("100%");
    cssLayout.setStyleName("csslayout");

    Label userNameLabel = new Label("LEFT");
    userNameLabel.setSizeUndefined();
    cssLayout.addComponent(userNameLabel);
    userNameLabel.setStyleName("leftPosition");

    Label dateLabel = new Label("MID");
    dateLabel.setSizeUndefined();
    cssLayout.addComponent(dateLabel);

    Label versionLabel = new Label("RIGHT");
    versionLabel.setSizeUndefined();
    cssLayout.addComponent(versionLabel);
    versionLabel.setStyleName("rightPosition");

    return cssLayout;
}

And styles.scss:

  .csslayout{
    text-align: center;
  }
  .leftPosition{
    float: left;
  }
  .rightPosition{
    float: right;
  }