Question

In the image below, you can see i have two tabs help and Instructions, i want to place these two tabs next to each other where the Help tab currently is. When i use the margin-left: property, only the help button moves to the left and the instructions button stays in the same place.

The css i am using to configure this:

    .v-csslayout-topbarapplicant .v-button,
.v-csslayout-topbarapplicant .v-nativebutton,
.v-csslayout-topbarapplicant-invert .v-button,
.v-csslayout-topbarapplicant-invert .v-nativebutton {
    float: right;
    display: inline;
    margin-right:0px;
    margin-left: 268px;
    margin-top: -18px;
    padding: 0 3px 2px 0;

line-height: 11px;
    } 

How can i change the spacing so that both tabs (vaadin components) move together?

Answer 1

You need to make sure both items are wrapped with a div. Then you set the margin-left to that div, not only one of the items.

There’s no way of telling in the CSS that you posted which items are being manipulated. If both of these items, “help” and “Instructions”, are in the CSS you posted, then you to need to change it so that both items exist as one, meaning in one div. If only one of these items exist in your CSS that you posted, then you have only one of them being manipulated with the CSS, and that one is floating right. Ensure both items are floated in the same direction and they are wrapped. Apply the margin to this wrapper div.

The general structure should look like this:

CSS:

#help, #instructions {
       float: right; 
 }        

   div#wrapper {
       margin-left: 268px;
     ] /* wrapper containing both items, "help" and "Instructions" */

HTML:

<div id="wrapper">
   <div id="help"></div>
   <div id="instructions"></div>
</div>