Shape-outside clear both

I am using shape-outside to wrap text around an image. The image floats to the left and the text raps around it perfectly. But when the browser screen gets smaller the text goes over the content that is further down the page.

My goal is to get the text to bump the content below further down the page rather then going over it. I used clear: both; but that did not effect anything. I tried floating the text to the right which solved the initial problem but instead of rapping around the image the text went below the image.

How do I use clear both to have the text rap around the image and not go over the content that is further down on the page? Or is there any other way to achieve this?

Here is my code:

#aboutP {
    position: relative;
    min-height: 300px;
    top: 200px;
    font-size: medium;
    font-family: 'Roboto Mono', sans-serif;
    color: white;
    line-height: 30px;

}

img {
    position: relative;
    width: 300px;
    min-height: 300px;
    float: left;
    top: 200px; 
    margin-right: 20px;
    margin-left: 20px;
    margin-bottom: 20px;
    shape-margin: 15px;
    shape-outside: circle(50%);
    -webkit-shape-outside:
        circle(50%);
    box-sizing: border-box;
}

#title {
    position: relative;
    text-align: center;
    width: 100%;
    height: 1000px;
    top: 200px;
    text-decoration: underline;
    color: white;
    font-family: 'Roboto Mono', sans-serif;
    clear: both;
    }