Force div go under other div besides floating image

Question

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:

<div id="container">
    <img src="image-source" alt="Image" id="image-id">    
    <div id="media_type">
        <h2>
            Title
        </h2>                                               
    </div>  
    <p>
        <a href="some-url" target="_blank">Feed</a>
    </p>        
    <div id="categs">       
        <b>Categories</b> 
        <ul>
            <li>
                category1
            </li>                               
            <li>
                category2
            </li>                                               
        </ul>
    </div>
    <!-- should go below image if first list is large enough -->
    <div id="keywords">                         
        <b>Keywords</b>
        <ul>    
            <li>
                keyword1
            </li>                               
            <li>
                keyword2
            </li>       
        </ul>                                   
    </div>          
    <div class="clear"></div>
    <div id="will-go-bellow-image"></div>
</div>

and the css:

#container #image-id {
    float: left;
    height: 220px;
    margin: 0 10px 10px 0;
    width: 220px;
}
#categs > ul > li, #keywords > ul > li {
    float: left;
    margin-top: 10px;
}

#categs > ul, #keywords > ul {
    list-style: none outside none;
}

Thanks, Adrian

Answer 1

In order to prevent content from wrapping around the floated element you could wrap the content including #media_type, #categs and #keywords divisions by a wrapper <div> and apply an overflow property to that element as follows:

<div class="wrapper">
    <div id="media_type"> ... </div>  
    <p>
      <a href="some-url" target="_blank">Feed</a>
    </p>        
    <div id="categs"> ... </div>
    <div id="keywords"> ... </div>          
</div>

.wrapper {
  overflow-x: auto; /* or overflow-x: hidden; */
}

WORKING DEMO.

You could also use overflow property instead of overflow-x for better browser support.

---

As per your comment:

if the category list is large enough, I would like the #keywords list to slip below the image.

I should note that since you are floating all the list items, you should clear the float at the end of the <ul> list element in order to make the parent to be as tall as its floated children.

This could be happen simply by using overflow property for the parent elements:

Example Here.

#categs > ul,
#keywords > ul {
  list-style: none;
  overflow: hidden; /* This will create a new block formatting context     */
  /* https://developer.mozilla.org/en-US/docs/CSS/block_formatting_context */
}

This will push the #keywords element to a new line.

You might also want to consider this great answer from @MrAlien:

• What does the CSS rule clear: both do?

Answer 2

http://fiddle.jshell.net/5Z8x9/4/show/

#will-go-bellow-image {
 clear: left;
}