title: Vaadin component added twice for some reason
body: <p>I'm developing a webapplication in the Vaadin framework.
  I have according to me a very strange behaviour in my application that some of you hopefully are familiar with or in other ways knows how to work around.</p>
  
  <p>This is the relevant code: </p>
  
  <pre><code>        AbstractComponent horizontalLine = Cf.horizontalLine();
          horizontalLine.addStyleName("m2m-horizontal-line-list-separator");
          horizontalLine.setWidth("100%");
          horizontalLine.setParent(null);
          SVerticalLayout spacer = Cf.vLayout(new SLabel(""));
          spacer.setMargin(true);
  
          CssLayout cssLayout = new CssLayout();
  
          cssLayout.addStyleName("m2m-css-style");
          cssLayout.addComponent(inventoryFilterPanel);
          cssLayout.addComponent(horizontalLine);
          cssLayout.addComponent(simCardTable);
  
          Panel basePanel = new Panel("");
          basePanel.setContent(cssLayout);
          basePanel.addStyleName("m2m-base-panel");
          basePanel.setSizeFull();
          basePanel.getContent().setSizeUndefined();
  
          addStyleName("m2m-tab-main-view");
          setMargin(false);
          addComponent(basePanel);
          setExpandRatio(basePanel, 1);
  </code></pre>
  
  <p>EDIT: Adding relevant CSS:</p>
  
  <pre><code>.m2m-horizontal-line-list-separator {
      width: 97%;
      margin-top: 20px;
      margin-bottom: 20px;
  }
  
  .m2m-css-style {
      margin: 10px;
  }
  
  .v-panel-content-m2m-base-panel .v-verticallayout  {
      min-width: 100%;
  }
  
  .m2m-tab-main-view {
  /**Didn't have any CSS inside it*/
  }
  </code></pre>
  
  <p>EDIT 2: Image showing the problem</p>
  
  <p><img src="https://i.stack.imgur.com/ePngQ.png" alt="enter image description here"></p>
  
  <p>EDIT 3: Screen shot of the generated markup from Firebug</p>
  
  <p><img src="https://i.stack.imgur.com/dFtCN.png" alt="enter image description here"></p>
  
  <p>In the markup you see a: 
  -Panel containing a CssLayout. 
  -Inside the CssLayout we have the first instance of the line, which shouldn't be there, which also is marked. 
  -The following div is the VerticalLayout which contains the filterPanel. 
  -Next we have the line, the one that is correct, and 
  -finally we have the table.</p>
  
  <p>The abstract component 'horizontalLine' works as a divider to divide the filterPanel component and the table. According to the code it's added once, however, for some weird reason in the browser it's added two times. One instance is added where I want it to be and another is added in the upper top of the cssLayout, above everything else! Crazy right!? =P</p>
  
  <p>I have no idea why this is. As you see from the code there's only one instance of it, and it's only added once.... Anyone have any idea of what is going on? </p>
  
  <p>Thanks!
  /Max</p>