1

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

ama
  • 1,525
  • 1
  • 16
  • 34
  • You want the image to float beside both the divs, which would be on top of each other? – wzub Mar 16 '14 at 14:44
  • Hi avist, yes exactly, but if the list in the first div is large the second div should slip under the image. This already happens with the existing configuration (I mean the two divs should not be bound together in a wrapper div)... – ama Mar 16 '14 at 14:48

2 Answers2

0

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:

Community
  • 1
  • 1
Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
0

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

#will-go-bellow-image {
 clear: left;
}
JohanVdR
  • 2,880
  • 1
  • 15
  • 16