float an image inside a list item

Question

I am using an ordered list like the one below, I want to wrap the <li> number 2 text around the image, which should be placed to the right. At this point the image gets pushed behind the ordered list when adding float: right: to it.

How can I wrap the text around the image inside a <li> item in my ordered list?

ol {
  counter-reset: li;
  /* Initiate a counter */
  list-style: none;
  /* Remove default numbering */
  *list-style: decimal;
  /* Keep using default numbering for IE6/7 */
  font: 15px 'trebuchet MS', 'lucida sans';
  padding: 0;
  margin-bottom: 4em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}

ol ol {
  margin: 0 0 0 2em;
  /* Add some left margin for inner lists */
}

.rounded-list a {
  position: relative;
  display: block;
  padding: .4em .4em .4em 2em;
  *padding: .4em;
  margin: .5em 0;
  background: #ddd;
  color: #444;
  text-decoration: none;
  border-radius: .3em;
  transition: all .3s ease-out;
}

.rounded-list a:hover {
  background: #eee;
}

.rounded-list a:hover:before {
  transform: rotate(360deg);
}

.rounded-list a:before {
  content: counter(li);
  counter-increment: li;
  position: absolute;
  left: -1.3em;
  top: 50%;
  margin-top: -1.3em;
  background: #87ceeb;
  height: 2em;
  width: 2em;
  line-height: 2em;
  border: .3em solid #fff;
  text-align: center;
  font-weight: bold;
  border-radius: 2em;
  transition: all .3s ease-out;
}

.alignright {
  float: right;
}

<ol class="rounded-list">
  <li><a href="">List item</a></li>
  <li><a href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<img class="alignright" src="http://via.placeholder.com/290x290"></a></li>
  <li><a href="">List item</a>
    <ol>
      <li><a href="">List sub item</a></li>
      <li><a href="">List sub item</a></li>
      <li><a href="">List sub item</a></li>
    </ol>
  </li>
  <li><a href="">List item</a></li>
  <li><a href="">List item</a></li>
</ol>

Answer 1

Would this work for you?

ol {
  counter-reset: li;
  /* Initiate a counter */
  list-style: none;
  /* Remove default numbering */
  *list-style: decimal;
  /* Keep using default numbering for IE6/7 */
  font: 15px 'trebuchet MS', 'lucida sans';
  padding: 0;
  margin-bottom: 4em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}

ol ol {
  margin: 0 0 0 2em;
  /* Add some left margin for inner lists */
}

.rounded-list a {
  position: relative;
  display: block;
  padding: .4em .4em .4em 2em;
  *padding: .4em;
  margin: .5em 0;
  background: #ddd;
  color: #444;
  text-decoration: none;
  border-radius: .3em;
  transition: all .3s ease-out;
}

.rounded-list a:hover {
  background: #eee;
}

.rounded-list a:hover:before {
  transform: rotate(360deg);
}

.rounded-list a:before {
  content: counter(li);
  counter-increment: li;
  position: absolute;
  left: -1.3em;
  top: 50%;
  margin-top: -1.3em;
  background: #87ceeb;
  height: 2em;
  width: 2em;
  line-height: 2em;
  border: .3em solid #fff;
  text-align: center;
  font-weight: bold;
  border-radius: 2em;
  transition: all .3s ease-out;
}

ol.rounded-list > li:nth-child(2):after {
  content: " ";
  display: block;
  clear: both;
}
ol.rounded-list > li:nth-child(2) a {
  display: block;
  float: left;
}
.alignright {
  float: right;
}

<ol class="rounded-list">
  <li><a href="">List item</a></li>
  <li><a href=""><img class="alignright" src="http://via.placeholder.com/290x290">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</a></li>
  <li><a href="">List item</a>
    <ol>
      <li><a href="">List sub item</a></li>
      <li><a href="">List sub item</a></li>
      <li><a href="">List sub item</a></li>
    </ol>
  </li>
  <li><a href="">List item</a></li>
  <li><a href="">List item</a></li>
</ol>

Answer 2

If you want to use float here -- and unlike many stack overflow questions about float you're actually using it for what it's intended for! -- you need two changes:

• Add clears to prevent overlaps. In this case it looks like it's necessary to add an explicit clearfix div; just putting clear on the image itself (using .alignright:after) would mean the background color from the <a> doesn't always fully contain the image.

• Put the image before the text it's to be floated around, instead of at the end.

Other than those changes, this is identical to your existing code:

ol {
    counter-reset: li; /* Initiate a counter */
    list-style: none; /* Remove default numbering */
    *list-style: decimal; /* Keep using default numbering for IE6/7 */
    font: 15px 'trebuchet MS', 'lucida sans';
    padding: 0;
    margin-bottom: 4em;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

ol ol {
    margin: 0 0 0 2em; /* Add some left margin for inner lists */
}



.rounded-list a{
    position: relative;
    display: block;
    padding: .4em .4em .4em 2em;
    *padding: .4em;
    margin: .5em 0;
    background: #ddd;
    color: #444;
    text-decoration: none;
    border-radius: .3em;
    transition: all .3s ease-out;   
}

.rounded-list a:hover{
    background: #eee;
}

.rounded-list a:hover:before{
    transform: rotate(360deg);  
}

.rounded-list a:before{
    content: counter(li);
    counter-increment: li;
    position: absolute; 
    left: -1.3em;
    top: 50%;
    margin-top: -1.3em;
    background: #87ceeb;
    height: 2em;
    width: 2em;
    line-height: 2em;
    border: .3em solid #fff;
    text-align: center;
    font-weight: bold;
    border-radius: 2em;
    transition: all .3s ease-out;
}

.alignright { float: right; }
.clearfix { clear:both }

<ol class="rounded-list">
    <li><a href="">List item</a></li>
    <li><a href=""><img class="alignright" src="http://via.placeholder.com/290x290"> An example with a large image and not enough text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    <div class="clearfix"></div></a></li>

    <li><a href=""><img class="alignright" src="http://via.placeholder.com/90x90"> An example with a smaller image. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    <div class="clearfix"></div></a></li>

    <li><a href="">List item</a>
        <ol>
            <li><a href="">List sub item</a></li>
            <li><a href="">List sub item</a></li>
            <li><a href="">List sub item</a></li>
        </ol>
    </li>
    <li><a href="">List item</a></li>
    <li><a href="">List item</a></li>                       
</ol>

Answer 3

No need to use float here...try to use display:flex in <a>

Stack Snippet

ol {
  counter-reset: li;
  /* Initiate a counter */
  list-style: none;
  /* Remove default numbering */
  *list-style: decimal;
  /* Keep using default numbering for IE6/7 */
  font: 15px 'trebuchet MS', 'lucida sans';
  padding: 0;
  margin-bottom: 4em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}

ol ol {
  margin: 0 0 0 2em;
  /* Add some left margin for inner lists */
}

.rounded-list a {
  position: relative;
  display: flex;
  align-items: flex-start;
  padding: .4em .4em .4em 2em;
  *padding: .4em;
  margin: .5em 0;
  background: #ddd;
  color: #444;
  text-decoration: none;
  border-radius: .3em;
  transition: all .3s ease-out;
}

.rounded-list a:hover {
  background: #eee;
}

.rounded-list a:hover:before {
  transform: rotate(360deg);
}

.rounded-list a:before {
  content: counter(li);
  counter-increment: li;
  position: absolute;
  left: -1.3em;
  top: 50%;
  margin-top: -1.3em;
  background: #87ceeb;
  height: 2em;
  width: 2em;
  line-height: 2em;
  border: .3em solid #fff;
  text-align: center;
  font-weight: bold;
  border-radius: 2em;
  transition: all .3s ease-out;
}

<ol class="rounded-list">
  <li><a href="">List item</a></li>
  <li><a href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<img class="alignright" src="http://via.placeholder.com/100x100"></a></li>
  <li><a href="">List item</a>
    <ol>
      <li><a href="">List sub item</a></li>
      <li><a href="">List sub item</a></li>
      <li><a href="">List sub item</a></li>
    </ol>
  </li>
  <li><a href="">List item</a></li>
  <li><a href="">List item</a></li>
</ol>