텍스트 오른쪽에 그림을 띄우려고 시도합니다.

Question

나는 주말 내내이 모든 작업을 해오 고 있으며, 어떤 이유에서이 div를 올바르게 나열 할 수 없습니다. 이미지를 텍스트의 오른쪽으로 이동하려고 시도하고 있습니다. 이동하지 않습니다. 누군가 내가 뭘 잘못하고 있는지 보도록 도와 줄 수 있습니까?

편집 : 이미지 아래에있는 텍스트의 작은 비트를 명확히하기 위해 이미지 아래에 이미지가 있어야하고 이미지의 작은 비트가 텍스트의 큰 블록 오른쪽으로 떠 있어야합니다.

HTML5

<section id="content-wrapper"> <!-- Main content of the site --> 
    <div id="content"> 
     <article> 
      <header> 
       <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit!!</h1> 
      </header><br> 

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><br> 

      <p>Lorem ipsum dolor sit amet,</p> 
      <p>Lorem ipsum dolor sit amet,</p> 
      <p>Lorem ipsum dolor sit amet,</p><br> 

      <p>Lorem ipsum dolor sit amet,</p><br> 

      <header> 
       <h2><p>Lorem ipsum dolor sit amet,</p></h2> 
      </header><br> 

      <ul> 
       <li>Lorem </li> 
       <li>Lorem </li> 
       <li>Lorem </li> 
       <li>Lorem </li> 
       <li>Lorem </li> 
       <li>Lorem </li> 
       <li>Lorem </li> 
       <li>Lorem </li> 
      </ul><br> 

      <header> 
       <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit!</h2> 
      </header><br> 

      <header> 
       <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h2> 
      </header><br> 

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 

      <footer> 
       <p>Lorem  &#42; Lorem  &#42; Lorem </p> 
      </footer> 

      <div id="sales-wrapper"> 
       <div id="sale-item1"> 
         <img src="http://placehold.it/350x450"> 
        <p> 
         Lorem ipsum dolor sit amet<br> 
         Price: $888 
        </p> 
       <div id="sale-item2"> 
         <img src="http://placehold.it/350x450"> 
        <p> 
         ipsum dolor sit amet<br> 
         Price: $888 
        </p> 
       </div> 
       <div id="sale-item3"> 
         <img src="http://placehold.it/350x450"> 
        <p> 
         ipsum dolor sit amet<br> 
         Price: $888 
        </p> 
       </div> 
       </div> 
      </div> 
     </article> 
    </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%; 
    background-color: antiquewhite; 
} 

#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; 
} 

#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: 30%; 
    float: left; 
    background-color:black; 
} 

Answer 1

두 가지 문제가 있었다 : 페이지가 텍스트가 옆에 앉아 할 수 있도록하는

1. 이미지가 너무 큰가. 당신이 왼쪽에 떠있는 모든 것을 말하고있다 따라서 이미지가 더 나은 당신이 제대로 위치를 CSS를 사용할 수있는 솔루션 또는 사용에 대한 올바른

에 앉아 싶지 않은 주요 판매 - 래퍼 사업부에서

텍스트를 왼쪽에, 오른쪽에 이미지를 보유하는 html 테이블. 그러나 간단한 해결책은 이미지 크기를 줄이고 이미지가 오른쪽으로 뜨는 동안 텍스트를 왼쪽으로 떠올리게하는 것입니다. 간단한 해결책이 여기에 표시됩니다

그건 : 사용중인 이미지가 모두 크기가 다르며

http://jsfiddle.net/4KNH9/

#sales-wrapper { 
    width: 100%; 
    float: right; 
    color:white; 
} 

#floatright { 
    float:left; 
} 

당신은 테이블이나 이미지의 폭과 높이를 설정을 사용할 수 있습니다 css, 저에게 도움이 필요하시면 알려주세요.