Align Image to the righ

Question

Я уже давно работаю над этим кодом HTML, и мне действительно нужно его завершить сегодня. Изображения под основным текстом должны быть справа от основного текста, описания предложения, которые у меня есть под этим изображением, должны оставаться там. Пожалуйста помоги.

HTML5

<section id="content-wrapper"> <!-- Main content of the site --> 
    <div id="content"> 
     <article> 
      <header> 
       <h1>NOW OPEN AT OUR LOCATION!!</h1> 
      </header><br> 

      <p>After a year of rebuilding we are back at our 
      original location. Come see us at</p><br> 

      <p>Store name &#38; Jewelry</p> 
      <p>store address</p> 
      <p>cite/state</p><br> 

      <p>Phone</p><br> 

      <header> 
       <h2>We have <span id="money">MONEY</span> TO <span id="loan">LOAN</span> for new pawns.</h2> 
      </header><br> 

      <ul> 
       <li>Jewelry</li> 
       <li>Flat Screen Tvs</li> 
       <li>Computers</li> 
       <li>Tools</li> 
       <li>Generators</li> 
       <li>Pressure Washers</li> 
       <li>Motorcycles</li> 
       <li>Lawn Mowers</li> 
      </ul><br> 

      <header> 
       <h2>Instant <span id="money">Cash</span> for you <span id="gold">GOLD</span>!</h2> 
      </header><br> 

      <header> 
       <h2>Broken jewelry welcome.</h2> 
      </header><br> 

      <p>Now is the time to get top dollar for your broken 
      or scrap jewelry.</p> 
      <p>Don’t trust your gold to the mail or some internet scam.</p> 
      <p>We pay Cash for your Gold, IMMEDIATELY and IN PERSON.</p><br> 

      <footer> 
       <p>BUY  &#42; SELL  &#42; TRADE</p> 
      </footer> 
     </article> 

      <div id="sales-wrapper"> 
       <div id="sale-item1"> 
         <img src="http://placehold.it/200x250"> 
        <p> 
         Item Name<br> 
         Price: $888 
        </p> 
       <div id="sale-item2"> 
         <img src="http://placehold.it/200x250"> 
        <p> 
         Item Name<br> 
         Price: $888 
        </p> 
       </div> 
       <div id="sale-item3"> 
         <img src="http://placehold.it/200x250"> 
        <p> 
         Item Name<br> 
         Price: $888 
        </p> 
       </div> 
       </div> 
      </div> 
    </div> 
</section> 

CSS3

#content-wrapper { 
    width: 70%; 
    margin: 1% auto; 
    line-height: 20px; 
    background-color: #F0F8FF; 
    overflow: hidden; 
} 

#content { 
    width: 100%; 
    float: left; 
    margin: 2%; 
} 

#content article { 
    padding: 3% 5%; 
    background-color: gray; 
    width: 40%; 
    float: left; 
} 

#content article p { 
    font-size: 16px; 
    margin-left: 2%; 
} 
#content article ul { 
    list-style: none; 
    margin-left: 5%; 
} 

#content article ul li { 
    font-size: 16px; 
} 

#content article header h2 { 
    color: #354175; 
} 

/* Span statments */ 

#money /* works for the words "MONEY" and "CASH" */ { 
    font-size: 20px; 
    color: #0E8B0B; 
} 

#loan { 
    font-size: 20px; 
    color: #C71F0E; 
} 

#gold { 
    font-size: 20px; 
    color: #DAA545; 
} 

#content article footer { 
    width: 100%; 
    float: left; 
    text-align: center; 
} 

#content article footer p { 
    font-weight: bold; 
    font-size: 23px; 
    color: #354175; 
} 

#sales-wrapper { 
    width: auto; 
    float: left; 
    margin: 40%; 
    background-color: gray; 
} 

Answer 1

Я сделал бы это по-другому, но я сохранил свой код без изменений и только изменил позиционирование. Проверьте это:

HTML:

<section id="content-wrapper"> <!-- Main content of the site --> 
     <div id="content"> 
     <article> 
      <header> 
      <h1>NOW OPEN AT OUR LOCATION!!</h1> 
      </header><br> 

      <p>After a year of rebuilding we are back at our original location. Come see us at</p><br> 

      <p>Store name &#38; Jewelry</p> 
      <p>store address</p> 
      <p>cite/state</p><br> 

      <p>Phone</p><br> 

      <header> 
      <h2>We have <span id="money">MONEY</span> TO <span id="loan">LOAN</span> for new pawns.</h2> 
      </header><br> 

      <ul> 
      <li>Jewelry</li> 
      <li>Flat Screen Tvs</li> 
      <li>Computers</li> 
      <li>Tools</li> 
      <li>Generators</li> 
      <li>Pressure Washers</li> 
      <li>Motorcycles</li> 
      <li>Lawn Mowers</li> 
      </ul><br> 

      <header> 
      <h2>Instant <span id="money">Cash</span> for you <span id="gold">GOLD</span>!</h2> 
      </header><br> 

      <header> 
      <h2>Broken jewelry welcome.</h2> 
      </header><br> 

      <p>Now is the time to get top dollar for your broken or scrap jewelry.</p> 
      <p>Don’t trust your gold to the mail or some internet scam.</p> 
      <p>We pay Cash for your Gold, IMMEDIATELY and IN PERSON.</p><br> 



      <footer> 
      <p>BUY  &#42; SELL  &#42; TRADE</p> 
      </footer> 

     </article> 
     </div> 

     <div id="sales-wrapper"> 
     <div id="sale-item1"> 
      <img src="http://placehold.it/200x250"> 
      <p> 
      Item Name<br> 
      Price: $888 
      </p> 
     <div id="sale-item2"> 
      <img src="http://placehold.it/200x250"> 
      <p> 
      Item Name<br> 
      Price: $888 
      </p> 
     </div> 
     <div id="sale-item3"> 
      <img src="http://placehold.it/200x250"> 
      <p> 
      Item Name<br> 
      Price: $888 
      </p> 
     </div> 
     </div> 

    </section> 

CSS:

#content-wrapper { 
     width: 100%; 
     margin: 1% auto; 
     line-height: 20px; 
     background-color: #F0F8FF; 
     overflow: hidden; 
     display: relative; 
    } 

    #content { 
     width: 50%; 
     float: left; 
     margin: 2%; 
    } 

    #content article { 
     padding: 3% 5%; 
     background-color: gray; 
     float: left; 
    } 

    #content article p { 
     font-size: 16px; 
     margin-left: 2%; 
    } 
    #content article ul { 
     list-style: none; 
     margin-left: 5%; 
    } 

    #content article ul li { 
     font-size: 16px; 
    } 

    #content article header h2 { 
     color: #354175; 
    } 

    /* Span statments */ 

    #money /* works for the words "MONEY" and "CASH" */ { 
     font-size: 20px; 
     color: #0E8B0B; 
    } 

    #loan { 
     font-size: 20px; 
     color: #C71F0E; 
    } 

    #gold { 
     font-size: 20px; 
     color: #DAA545; 
    } 

    #content article footer { 
     width: 100%; 
     float: left; 
     text-align: center; 
    } 

    #content article footer p { 
     font-weight: bold; 
     font-size: 23px; 
     color: #354175; 
    } 

    #sales-wrapper { 
     float: right; 
     display: relative; 
     margin: 20px; 
     top: 20px; 
     left: 10px; 
     background-color: gray; 
    }