title: float 2 elements inside inline-block horizontal
body: <p>I'm trying to float <code>span</code> and <code>ul</code> next to each other but without fixed width it wont float to each other horizontal but instead act like float wasen´t applied and stack vertical. When i set fixed width and remove <code>display:inline-block</code> from <code>updates-documents-holder-inside</code> it will appear to act as intended in first place. <a href="http://jsfiddle.net/Jx3dv/" rel="nofollow">http://jsfiddle.net/Jx3dv/</a> to show the problem.</p>
  
  <pre><code>&lt;div class="updates-documents-holder"&gt;
          &lt;div class="updates-documents-holder-inside"&gt;
              &lt;span&gt;&lt;div&gt;&lt;/div&gt;&lt;/span&gt;
              &lt;ul&gt;
                  &lt;li&gt;Flytt av sopor.doc&lt;/li&gt;
                  &lt;li&gt;5FSE 0000 000&lt;/li&gt;
                  &lt;li&gt;Har blivit uppdaterad&lt;/li&gt;
                  &lt;li&gt;2014-28-15&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>Css</p>
  
  <pre><code>.updates-documents-holder{
  float:left;
  width:23.8em;
  height:5em;
  text-align:center;
  
  }
  .updates-documents-holder-inside{
  display:inline-block;
  
  }
  .updates-documents-holder-inside &gt; span{
  display:block;
  float:left;
  background:green;
  }
  .updates-documents-holder-inside &gt; span &gt; div{
  display:block;
   height:50px;
  width:50px;
  
  }
  .updates-documents-holder-inside &gt; ul{
  display:block;
  float:left;
  text-align:left;
  list-style:inside;
  padding-left:1em;
  background:red;
  }
  </code></pre>