Wrapping paragraph around div - html

Question

i'm trying to wrap my paragraph's text around the image's div, i've tried everithing but can't figured out why is not working, my head is literally floating left and right by now...
here is the css:
/* CSS Document Sidebar */
#sidebar {
background-color: #FFF;
width: 330px;
height: auto;
float: left;
}
#news {
width: 300px;
height: 200px;
margin: 15px;
position: relative;
border: solid 1px;
}
.newsImage {
width: 120px;
height: 120px;
position: absolute;
float: left;
bottom: 0px;
margin: 5px;
padding: 10px;
border: solid 1px;
}
.newsImage img {
width: 100%;
height: 100%;
}
#news p.title {
font-size: 14px;
color: #333;
margin: 5px;
}
#news p.content {
font-size: 12px;
word-wrap:break-word;
margin: 5px;
color: #333;
}
/* CSS Document Sidebar - END */
here the divs
echo '<div id="news">';
echo '<p class="title">'.$row_Display['PageName'].'</p>';
echo '<p class="content">'.$row_Display['PageContent'].'</p>';
echo '<div class="newsImage">';
echo '<img src="'.trim($row_Display['Image'], '/').'" />';
echo '</div>';
echo '</div>';
UPDATE:
Add here an example of my structure (i don't have the reputation for upload an image):
-----------------------
| <p>[TITLE] |
| |
| <p>[CONTENT] |
|-----------| content |
| IMAGE div | wrap |
| | around |
-----------------------
SOLUTION:
The problem was the position:absolute like Martijn said, but with some tests i manage to reach my own solution. For those who are still stuck on this issue you just need to:
Delete the position:absolute and position:relative from the CSS
Set every paragraph <p> to <div> with the same classes or id
Now put in HTML code the <div 'title'> on top and set float:left
Create under the previous an emtpy <div class='clear'></div> and set the CSS .clear{clear:both;}
Now the image's div goes INTO the content/text's div, make sure to put the <img src='' /> just before the text so the image can float free.
And then you can set the CSS with .img{float:right;} and .content/text{float:left;}. Doing this the text will wrap perfectly around the image
For those who voted negative i'm sry if my previous post wasn't that clear and complete and excuse me for my english.
Hope this can help someone.
Regards.

Answer 1

Try to avoid position absolute. This only complicates things in the long run, maintanance-wise.
Then, what you first need to do is create a more table like structure. Create two columns (your title+content and the image) and proceed from there:
-----------------------
| [TITLE] | IMAGE |
|------------| IMAGE |
| [CONTENT] | IMAGE |
-----------------------
The thing you're looking for is display: inline-block;, this allows multiple elements to be on one line (inline) and still give it dimentions (block). This does require the element to touch eachother, no spaces between them (see in the example provided below).
I've made a simple example for you
I'm not a float fan. IMO they're always complicating stuff more than they fix.