CSS: text goes at left when float ends + nonbreakingline issue

I have a box where开发者_开发技巧 user activity will be inside.

Now I am having two issues.

The first one is that i have a float left element, and when this ends the text also goes at left. (issue1)

The second is that if you type in a non-breaking word/sentence, like eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee it wont break it and go under, but allows it going to the right, like it do not listen to the width specified.

Here is live of both issues:

http://jsfiddle.net/AB4Ls/5/

Help please, how can I solve this, and why is this happening?

For first issue set element that contains text to be displayed as block and give it left-margin amount of floated element width.

display: block;
margin-left: 40px; /* adjust to your needs */

For second issue check this url: http://perishablepress.com/press/2010/06/01/wrapping-content/ Explanation is to long to repeat it here.

Are you sure it is possible you have such long words? If true you can use css3 property word-wrap or parse words with php before displaying it.

I think you're saying that you want the text in the issue 1 to NOT flow back under your image that you've floated to the left.

If so, just surround the text with a div tag and use display: table-cell. This will put a "rigid border" if you will, around your text.