How can I float an unordered list (ul) to the right of an image without specifying fixed widths

Question

I am trying to float an unordered list to the right of an image. My html looks like this:

<img src="..." class="left" alt="" />
<h3>Internet Explorer Shortcut keys</h3>
<ul>
<li>Go to the web page that you want to view</li>
<li><strong>Explorer Shortcut keys</strong>: Press <strong>Shift+F12</strong> and the code should appear in a separate window</li>
<li>If this does not work, hold the mouse pointer over a blank part of the web page, right click and choose "<em>HTML</em>".</li>
<li>Alternatively from the menu bar select <em>View</em> and choose "<em>HTML</em>" or "<em>Source</em>" depending on the version you are using.</li>
</ul>

The css is fairly complicated but looks somehting like this:

.itemFullText ul {margin:20px 0 30px 10px;padding-left:0px;list-style:none;float:left;}
.itemFullText ul li {margin:0 0 6px;padding:0 0 0 30px;float:none;background:url(http://www.jeyjoo.com/img/s.png) -381px 0px no-repeat;line-height:22px;font_weight:bolder;display:block;}
.itemFullText ul li {
    background: url("http://www.jeyjoo.com/img/s.png") no-repeat scroll -381px 0 rgba(0, 0, 0, 0);
    display: block;
    float: none;
    line-height: 22px;
    margin: 0 0 6px;
    padding: 0 0 0 30px;
}

The actual page is here. Thanks

Solution

The simplest option is to use CSS3 flexboxes.

Wrap the ul/img elements and then set the display of the wrapper element to flex:

.wrapper {
  display: flex;
}

<div class="wrapper">
  <img src="http://placehold.it/200x200" />
  <ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam interdum facilisis posuere.</li>
    <li>Mauris pellentesque, sem a cursus dignissim, turpis sem mollis nisl, id dignissim sem quam at leo. Etiam rutrum sit amet metus eget feugiat. Sed egestas accumsan augue at efficitur.</li>
    <li> Quisque erat arcu, eleifend consectetur semper vel, semper non metus. Cras sed magna metus. Maecenas auctor lacus nec ligula fermentum congue. Aenean a hendrerit ex. Curabitur eu nisi velit. Duis a dignissim tortor.</li>
  </ul>
</div>

Alternatively, you could also use CSS tables and set the display of the wrapper element to table and then set the display of the children ul/img elements to table-cell:

.wrapper {
  display: table;
}
.wrapper ul,
.wrapper img {
  display: table-cell;
  vertical-align: top;
}

<div class="wrapper">
  <img src="http://placehold.it/200x200" />
  <ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam interdum facilisis posuere.</li>
    <li>Mauris pellentesque, sem a cursus dignissim, turpis sem mollis nisl, id dignissim sem quam at leo. Etiam rutrum sit amet metus eget feugiat. Sed egestas accumsan augue at efficitur.</li>
    <li> Quisque erat arcu, eleifend consectetur semper vel, semper non metus. Cras sed magna metus. Maecenas auctor lacus nec ligula fermentum congue. Aenean a hendrerit ex. Curabitur eu nisi velit. Duis a dignissim tortor.</li>
  </ul>
</div>