Question

I currently have a problem concerning the behaviour of floating items, and containers not wrapping around them.

I have a list of items that wrap floating elements. This is a very simplified version:

<ul class="items">
  <li><img src="" />Text here</li>
  <li><img src="" />More text</li>
</ul>

The CSS looks something like this:

ul.items li
{
  display: block;
  border: 1px solid pink;
}

ul.items li img
{
  float: left;
}

Previously I have added a ‘clearing’ item at the bottom of each list item to expand it to wrap around the image. This is equivalent to Tony Aslett’s CSS version. An example can be seen here.

Unfortunately, I have a menu floating on the left of the list, meaning that adding the clearing creates a huge space underneath the first item. This is mentioned on the above page under A Word Of Warning (this is important). The effect can be seen here.

I followed an alternative solution I found from Paul O’Brien, using the overflow property. This works like a charm. Unfortunately, in addition to the menu on the left, each list item had a menu floating in the upper-right. With overflow: auto, those items are pushed outside. This can be seen here. The markup is similar to this:

<ul class="items">
    <li>
        <div class="floaty">*</div>
        <div class="item">
            <div class="img"></div>Text here
        </div>
    </li>
    <li>
        <div class="floaty">*</div>
        <div class="item">
            <div class="img"></div>More text
        </div>
    </li>
</ul>

Is there any way to get the ‘floaty’ element to stay inside the ‘item’ element using this method? Alternatively, is there another solution I might be missing?

Answer 1

I’m not 100% sure what the entire use-case is here, but for the .floaty element is it reasonable to use position instead of float?

Basically add this:

ul.items li { position: relative; }
div.floaty { float: none; position: absolute; top: 0; right: 0; }

Fiddle