title: css separator of two float divs
body: <p><a href="http://jsfiddle.net/dx6m9/" rel="nofollow">http://jsfiddle.net/dx6m9/</a></p>
  
  <pre><code>    &lt;style&gt;
      .floated {float: left;}
      .container {width: 100%;}
      .left, .right {
          width:60%; 
          box-sizing:border-box; 
          padding:10px;
  }
      .left {width:40%; border-right: 1px dotted #dddddd;}
      .clearfix {clear:both;}
      &lt;/style&gt;
  
      &lt;div class="container"&gt;
        &lt;div class="floated left"&gt;
            Ahoj
          &lt;/div&gt;
          &lt;div class="floated right"&gt;
              Nazdar
              &lt;br /&gt;
              Ahoj
              &lt;br /&gt;
               Nazdar
              &lt;br /&gt;
              Ahoj
  
          &lt;/div&gt;
       &lt;div class="clearfix"&gt;&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>how to force the right border to be always long as longer of these two float divs?
  That border should acts just like a separator.</p>