Can also try this...The following code will easily fix the issue.
Here is updated HTML...Posting only updated part
<div id="content">
<div id="image"><img src="img/image.png" alt="dart-face"/></div>
<div id="text">
<h1>Darth Vader</h1>
<p>
Darth Vader (born Anakin Skywalker) is a central character in the Star Wars saga,[1][2][3] appearing as one of the main antagonists of the original trilogy and as the main protagonist of the prequel trilogy.
<p>
The character was created by George Lucas and numerous actors have portrayed him. His appearances span all six Star Wars films, and he is an important character in the expanded universe of television series, video games, novels, literature and comic books.
</p>
</p>
</div>
<div style="clearfix"> </div>
</div>
Now we have to remove unwanted code from CSS
Please remove following code from your CSS (same one to posted in question)
#image
{
margin: 34px;
}
#text
{
/*position: absolute;*/
line-height: 20px;
text-align: left;
margin: 34px 25px 25px 25px;
}
.fleft
{
float: left;
}
.fright
{
float: right;
}
Now simply add the following CSS
#image
{
float: left;
width:30%; /*Choose width accordingly*/
}
#text
{
float: left;
width:60%; /*Choose width accordingly*/
}
.clearfix
{
display:block;
clear:both;
content:'';
}
try this hope this help....and if any query ? donot hesitate to comment THANKS