float: right/left with objects messing up my page, “Indigo” theme

The best way to explain this is using a picture:

https://www.eggside.com/wp-content/uploads/2007/01/problem.gif

I used

.alignleft and .alignright {
float:right/left
padding:5px

}

The problem is temporarily solved by me shrinking the size of the image.

If the image’s height is higher than the text i have, i will encounter the problem in the picture

What is wrong? Or this is an unsolvable problem and i m force to write a Loooonnnnngggg article all the time