CssLayout component positioning

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;
    } 

I don't understand what you are trying to achieve.

Why not using Vaadin's TabSheet or the DetachedTabs add-on ?

Are you just trying to make the content of a CssLayout horizontal ?
If the latest, check this post it gives some pointers on how to do that.