title: HTML5 & CSS3: Align text next to image
body: <p>Images are correctly aligned under each other but text appear next to the first image only.</p>
  
  <p>I want the first h2 and p to appear next to the first image, and the second h2 and p to appear next to the second image.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Yoko Lounge&lt;/title&gt;
          &lt;meta name="author" content="Yoko"/&gt;
          &lt;link href="styles.css" rel="stylesheet" type="text/css"/&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="wrapper"&gt;
              &lt;div id="header"&gt;
                  &lt;h1&gt;Yoko Lounge&lt;/h1&gt;
              &lt;/div&gt;
              &lt;div id="nav"&gt;
                  &lt;ul&gt;
                      &lt;li class="current"&gt;Home&lt;/li&gt;
                      &lt;li&gt;Forum&lt;/li&gt;
                      &lt;li&gt;Members&lt;/li&gt;
                      &lt;li&gt;Calendar&lt;/li&gt;
                      &lt;li&gt;Logout&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;div id="figs"&gt;
                  &lt;img class="figure" src="bok-choi.jpg" alt="bok"/&gt;
                  &lt;h2&gt;Best Plant&lt;/h2&gt;
                  &lt;p&gt;This plant gives you health.&lt;/p&gt;
                  &lt;img class="figure" src="teriyaki.jpg" alt="teriyaki"/&gt;
                  &lt;h2&gt;Teriyaki Health Plant&lt;/h2&gt;
                  &lt;p&gt;This plant gives you health.&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre class="lang-css prettyprint-override"><code>body {
      background: url("dark-wood.jpg");
      margin: 0px;
  }
  
  #wrapper {
      width: 920px;
      margin: 20px auto;
      border: 2px solid black;
  }
  
  #header {
      height: 130px;
      background: url("header.jpg");
  }
  
  h1 {
      text-indent: -9999px;
      margin: 0px;
  }
  
  #nav {
      background: #AEACA8;
      color: #FFFFFF;
      height: 30px;
  }
  
  #nav ul {
      margin: 0px;
      padding: 5px 0px 5px 30px;
  }
  
  #nav li {
      display: inline;
      margin-right: 40px;
  }
  
  #nav ul li.current, #nav ul li:hover {
      color: black;
  }
  
  #content {
      background: #FFFFFF;
      color: black;
      width: 100%;
  }
  
  #figs {
      background: #FFFFFF;
      color: black;
      float: left;
      width: 70%;
  }
  
  img.figure {
      display: block;
      border: 1px solid black;
      margin: 20px 20px;
      float: left;
  }
  </code></pre>