Search code examples
css-floatoverflowborderoverlap

Image overlapping DOM element border

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:

enter image description here

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

enter image description here

Here is JSfiddle. Thanks in advance guys!

Solution

  • 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!