Image overlapping DOM element border

Question

I have a CSS problem. The floated image on my page overlaps the border of a paragraph.

The style looks like this:

.paragraph {
    border:1px solid #DDDDDD;
}

.image {
    float:right;
}

Here's the printscreen:

My question is: How to make it to behave like this?

Here is JSfiddle. Thanks in advance guys!

Answer 1

After few hours of researching, I found a very simple solution to this.

We just need to add one line of code to boxed paragraph:

overflow: hidden;

See JSFiddle for the result.

But thanks anyway!

Answer 2

At first change your HTML structure something like that

        <div class="left-content">
            <p class="boxed-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, ipsam, labore excepturi vel corporis libero facere impedit odio similique ipsa architecto mollitia dignissimos eveniet quaerat.</p>
            <p class="boxed">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, ipsam, labore excepturi vel corporis libero facere impedit odio similique ipsa architecto mollitia dignissimos eveniet quaerat optio nulla totam voluptatem! Tenetur.</p>
        </div>


            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/240px-HTML5_logo_and_wordmark.svg.png" alt="HTML5_logo" class="image-right">

            <div class="clearfix"></div>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, ipsam, labore excepturi vel corporis libero facere impedit odio similique ipsa architecto mollitia dignissimos eveniet quaerat optio nulla totam voluptatem! Tenetur.</p>

After that added this bellow CSS:

.boxed {
    padding:20px 40px;
    border:1px solid #DDDDDD;
 }
.image-right {
    float:right;
    width:150px;
}
.left-content {
    float: left;
    margin-bottom: 30px;
    width: 80%;
}
.boxed-1{
    margin-bottom:10px;
}
.clearfix{
    clear:both;
}