title: How can I float an unordered list (ul) to the right of an image without specifying fixed widths
body: <p>I am trying to float an unordered list to the right of an image. My html looks like this:</p>
  
  <pre><code>&lt;img src="..." class="left" alt="" /&gt;
  &lt;h3&gt;Internet Explorer Shortcut keys&lt;/h3&gt;
  &lt;ul&gt;
  &lt;li&gt;Go to the web page that you want to view&lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;Explorer Shortcut keys&lt;/strong&gt;: Press &lt;strong&gt;Shift+F12&lt;/strong&gt; and the code should appear in a separate window&lt;/li&gt;
  &lt;li&gt;If this does not work, hold the mouse pointer over a blank part of the web page, right click and choose "&lt;em&gt;HTML&lt;/em&gt;".&lt;/li&gt;
  &lt;li&gt;Alternatively from the menu bar select &lt;em&gt;View&lt;/em&gt; and choose "&lt;em&gt;HTML&lt;/em&gt;" or "&lt;em&gt;Source&lt;/em&gt;" depending on the version you are using.&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The css is fairly complicated but looks somehting like this:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>The actual page is <a href="http://jeyjoo.com/blog/how-to-view-the-code-behind-a-website" rel="nofollow">here</a>.
  Thanks</p>