如何將div放置在圖像的右側？

Question

我在頁面的中心有圖像。

欲文本的<div class='contain'>內部的顯示塊，這將是float left到圖像。 10px之間的圖像到<div class='contain'>。

我不想移動圖像，我想圖像將停留在中心，只是在右側我把<div class='contain'>。

我添加屬性clear:both;圖像或div，我認爲我不知道如何使用它。

jsfiddle Demo

我該怎麼辦呢？ THX

我的代碼：

<h1><a id="toptitle" href="http://www.centerwow.com">portfolio</a></h1> 
<div id="container"> 

    <div id="all_pages"> 

     <div class="page"> 
      <h1>Home Page</h1> 
      <img src="images/yellow_flowers.jpg" width="300px" height="300px"> 
      <div class='contain'>this is the home page bla bla bla</div> 
     </div> <!-- page1 --> 
     <div class="page"> 
      <h1>About Us Page</h1> 
      <img src="images/Pink_Flowers.jpg" width="300" height="300px"> 

     </div> <!-- page2 --> 
     <div class="page"> 
      <h1>Contact Us Page</h1> 
      <img src="images/green_flowers.jpg" width="300" height="300px"> 

     </div> <!-- page2 --> 

    </div> <!-- #all_pages --> 

</div> <!-- #container --> 

<div id="menu"> 
<ul> 
    <li id="1" class="link CC3366 active">Home</li> 
    <li id="2" class="link 33FF66">About</li> 
    <li id="3" class="link FFFF33">Contact Us</li> 
</ul> 
</div> <!-- #menu --> 
<div id="footer"><a class="link" href="http://www.centerwow.com">mysite</a></div> 
​ 
body { 
    background: #CC3366 url(images/temp.png) center 130px no-repeat ; 
    overflow:hidden; 
    margin:0; 
    padding:0; 
    } 
#container { 
    width: 1000px; 
    overflow: hidden; 
    position: relative; 
    height: 450px; 
    margin: 0 auto; 
} 

#all_pages { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 3000px; 
    } 
.page { 
    width: 1000px; 
    height: 400px; 
    float: left; 
    text-align: center; 
    margin-top: 10px; 
    }  
.page img { 
    margin-top: 10px; 
    } 
#menu { 
    background: #000; 

    } 
#menu ul { 
    list-style: none; 
    width: 457px; 
    height: 35px; 
    margin:auto; 
    } 
#menu ul li { 
    float: left; 
    color: #FFFF33; 
    width: 150px; 
    line-height: 35px; 
    text-align: center; 
    cursor: pointer; 
    } 
.active { 
    color: #fff !important; 
    } 
#footer a{ 
    font-size: 25px; 
    font-weight: bold; 

    } 
#footer{ 
    line-height: 100px; 
    background: #CC3366; 
    width:100%; 
    height:1000px; 
    text-align: center; 
    display: block; 
} 
#toptitle { 
    position: absolute; 
    width:100px; 
    top: 30px; 
    left: 30px; 
    color: #000; 
    cursor: pointer; 
    z-index:20; 
} 
a { 
text-decoration: none; 
} 
#contain{ 
    clear:both; 
    float:left; 
    margin-left:10px; 
    background: blue; 
    width:300px; 
    height:300px; 
} 
.clear{ 

}​ 


$(".link").click(function(){ 
     var page = $(this).attr("id"); 
     var color = $(this).attr("class"); 
     color = color.substr(5,6); 
     $('#all_pages').animate({left: (page-1)*(-1000) }); 
     $("body").animate({backgroundColor: '#'+color}); 
     $("#menu ul li").removeClass('active'); 
     $(this).addClass('active'); 
    }); 

Answer 1

我用表格做的工作，它似乎摸出確定。

<center> 
<table> 
    <tr> 
    <td valign=top align=right width=50%>Here is the text</td> 
    <td width=300px><img src='fun.jpg' width=300px height=300px></img></td> 
    <td width=50%></td> 
    </tr> 
</table> 
</center>