I am trying to create an ordered list with a link to an article in the middle and a small png image file positioned directly to the right of it.
For reference, here is an image depicting the exact type of list that I am aiming to achieve: https://i.stack.imgur.com/UFyWs.png
The current code I have is almost there but requires some modifications. What adjustments should I make to my code to successfully implement this ordered list?
HTML
<div id ="most-emailed">
<h2>MOST EMAILED</h2>
<ol>
<li>
<a href="">Well: Writing Your Way To Happiness</a>
<img src="images/well.jpg"/>
</li>
<li>
<a href="">White House Proposals on 529 College Plans Would Reduce Benefits</a>
</li><img src="images/silver.jpg"/>
<li>
<a href="">Well: Ask Well: The Benefits of a Lunch Hour Walk</a>
<img src="images/physed.jpg"/>
</li>
<li>
<a href="">Well: Ask Well: The Best Time of Day to Exercise to Lose Weight</a>
<img src="images/morning.jpg"/>
</li>
<li>
<a href="">Op-Ed Contributor: Why Adnan Syed of 'Serial' Should Have Pleaded Guilty</a>
<img src="images/murray.jpg">
</li>
<li>
<a href="">36 Hours in Denver</a>
<img src="images/denver.jpg"/>
</li>
<li>
<a href="">U.S Says Assembly Speaker Sheldon Silver Took Millions in Payoffs...</a>
<img src="images/silver.jpg"/>
</li>
<li>
<a href="">Paul Krugman: Much Too Responsible</a>
<img src="images/krugman.png"/>
</li>
<li>
<a href="">David Brooks: The Devotion Leap</a>
<img src="images/brooks.png"/>
</li>
<li>
<a href="">36 Hours: What to Do in Denver</a>
<img src="images/36hours.jpg"/>
</li>
</ol>
</div
CSS
#most-emailed{
width:250px;
height:500px;
float:right;
border-top:1px solid #C9C9C9;
border-bottom: 1px solid #C9C9C9;
}
#most-emailed h2{
font-size:10px;
margin:0;
padding-top:10px;
padding-bottom:10px;
font-family:arial;
font-weight:700;
}
#most-emailed img{
width:30px;
height:30px;
}
#most-emailed ol{
padding:0;
margin:0;
}
#most-emailed a {
color:#6288a5;
font-size:12px;
vertical-align:middle;
}
#most-emailed li{
width:100%;
height:50px;
text-align:left;
list-style-type:inside;
}