how to position div in the right side of the image? - html

Question

I have image on the center of the page .
I want to display block of text inside the <div class='contain'> which will be float left to the image. 10px between the image to <div class='contain'>.
I don't want to move the image ,I want to image will stay in the center and just in the right side i put the <div class='contain'>.
I add property clear:both; to image or to the div and I think that I don't know how to use it.
jsfiddle Demo
how can I do that?
Thx
my code:
<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

I using table to do the job and it seems work out ok.
<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>