title: GWT component spacing on HorizontalPanel
body: <p>I have the following code to layout the menu for my page:</p>
  
  <pre><code>//Header Conainer Panel
  VerticalPanel headerWidget = new VerticalPanel();
  headerWidget.setWidth("100%");
  
  
  //Header Panel
  HorizontalPanel headerPanel = new HorizontalPanel();
  headerPanel.setStyleName("header");
  headerPanel.setWidth("100%");
  Label title = new Label("Information System");
  title.setStyleName("componentgap");
  headerPanel.add(title);
  headerWidget.add(headerPanel);
  
  //Menu 1 Panel
  HorizontalPanel menu = new HorizontalPanel();
  menu.setStyleName("menu1");
  menu.setHorizontalAlignment(HorizontalPanel.ALIGN_LEFT);
  
  Label componentLabel = new Label("Component");
  componentLabel.setStyleName("componentgap");
  componentLabel.setWidth("50px");
  menu.add(componentLabel);
  
  //Outbound Routing Menu Item
  final Label outRouteMenu = new Label("Routing");
  outRouteMenu.setWidth("75px");
  outRouteMenu.setStyleName("menu1button");
  </code></pre>
  
  <p>I have to set the headerPanel and headerWidget to 100% as I want the top page bars to take up the whole width of the screen. However, when I add Labels to the menu they are being spaced evenly accross the screen rather than on the left next to each other as I want. As you can see I tried to set the width of the Labels explicitly to force them to be smaller and therefore next to each other in the menu bar.</p>
  
  <p>Any ideas how I can achieve this? you will see I am using styles I include these below but will point out they do not intefer with the width of a component.</p>
  
  <p>Thank you,</p>
  
  <p>James</p>
  
  <p>Currently I have something like this:</p>
  
  <p><img src="https://i.stack.imgur.com/zQw9c.jpg" alt="alt text"></p>
  
  <p>CSS:</p>
  
  <pre><code>.header { 
          background-color:       #669966;
          border-bottom-color:    #003300;
          border-right-color: #003300;
          border-top-color:   #99CC99;
          border-left-color:  #99CC99;
          color:                  #FFFFFF;
          padding:                0px;
          border-style:           solid;
          border-width:           1px;
          margin:                 0px;
          font:                   bold 165% "Trebuchet MS",sans-serif;
          }
  
  .menu1 {
          background-color:      #336633;
          border-bottom-color:   #003300;
          border-right-color:    #003300;
          border-left-color:     #99CC99;
          border-top-color:      #99CC99;
          color:                 #FFFFFF;
          padding:               0px;
          border-style:          solid;
          border-width:          1px;
          font:                  85% "Trebuchet MS",sans-serif;
         }
  
  .menu1button {
               background-color:      #336633;
               border-bottom-color:   #003300;
               border-right-color:    #003300;
               border-left-color:     #99CC99;
               border-top-color:      #99CC99;
               color:                 #FFFFFF;
               padding:               0px;
               border-style:          solid;
               border-width:          0px;
               margin:                5px;
               font:                  85% "Trebuchet MS",sans-serif;
               }
  
  .menu1selectedbutton {
               background-color:      #669966;
               border-bottom-color:   #003300;
               border-right-color:    #003300;
               border-left-color:     #99CC99;
               border-top-color:      #99CC99;
               color:                 #336633;
               padding:               0px;
               border-style:          solid;
               border-width:          0px;
               margin:                5px;
               font:                  85% "Trebuchet MS",sans-serif;
               }
  
  
  
  .menu2 {
          color:#A6A6A6;
          padding: 0px;
          border-style:none;
          margin:0px;
          font: 85% "Trebuchet MS",sans-serif;
          }
  
  .menu2button {
              color:#336633;
              padding: 0px;
              border-style:none;
              margin:5px;
              font: 85% "Trebuchet MS",sans-serif;
              }
  
  .menu2selectedbutton { 
                          color:#336633;
                          background-color:     #669966;
                          padding: 0px;
                          border-style:none;
                          margin:5px;
                          font: 85% "Trebuchet MS",sans-serif;
                      }
  
  .componentgap{
                  margin: 4px;
  
  }
  </code></pre>