Wrapping paragraph around div

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.

Provide a fiddle and more information, is impossible to know what do you need — Marcos Pérez Gude, Aug 18 '15 at 10:23
I update the post, the
'content' keep standing behind the
, but i'm looking for a way to wrap it around the div. — user2592584, Aug 18 '15 at 11:09
Until [**CSS Shapes**](http://www.w3.org/TR/css-shapes-1/) come on stream...you can't do this with current layout models (AFAIK). — Paulie_D, Aug 18 '15 at 12:06
Essentially a duplicate of http://stackoverflow.com/questions/499829/how-can-i-wrap-text-around-a-bottom-right-div — Paulie_D, Aug 18 '15 at 12:08

Martijn · Answer 1 · 2015-08-18T10:31:52.407

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.

You were right! The problem is the position:absolute making the div out of the page so the wrap doesn't work, i need to find a way to position the div bottom left without the absolute condition. — user2592584, Aug 18 '15 at 12:08

Wrapping paragraph around div

1 Answers1