title: Force div go under other div besides floating image
body: <p>I have the following situation: one image floated left. I am having trouble forcing one div(id="keywords") (containing a list) to go under the previous div(id="categories")(also containing a list), but without breaking the floating of the image (this is what happens if I do a clear:left before the latdiv) and should slip under the image if the list in the former div is large. Here is my html code:</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;img src="image-source" alt="Image" id="image-id"&gt;    
      &lt;div id="media_type"&gt;
          &lt;h2&gt;
              Title
          &lt;/h2&gt;                                               
      &lt;/div&gt;  
      &lt;p&gt;
          &lt;a href="some-url" target="_blank"&gt;Feed&lt;/a&gt;
      &lt;/p&gt;        
      &lt;div id="categs"&gt;       
          &lt;b&gt;Categories&lt;/b&gt; 
          &lt;ul&gt;
              &lt;li&gt;
                  category1
              &lt;/li&gt;                               
              &lt;li&gt;
                  category2
              &lt;/li&gt;                                               
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;!-- should go below image if first list is large enough --&gt;
      &lt;div id="keywords"&gt;                         
          &lt;b&gt;Keywords&lt;/b&gt;
          &lt;ul&gt;    
              &lt;li&gt;
                  keyword1
              &lt;/li&gt;                               
              &lt;li&gt;
                  keyword2
              &lt;/li&gt;       
          &lt;/ul&gt;                                   
      &lt;/div&gt;          
      &lt;div class="clear"&gt;&lt;/div&gt;
      &lt;div id="will-go-bellow-image"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the css:</p>
  
  <pre><code>#container #image-id {
      float: left;
      height: 220px;
      margin: 0 10px 10px 0;
      width: 220px;
  }
  #categs &gt; ul &gt; li, #keywords &gt; ul &gt; li {
      float: left;
      margin-top: 10px;
  }
  
  #categs &gt; ul, #keywords &gt; ul {
      list-style: none outside none;
  }
  </code></pre>
  
  <p>Thanks,
  Adrian</p>