The problem with the layout is that when the browser is made smaller, the images don’t reach the bottom of the .bioshorts div and the text stays to the left side of the div and doesn’t wrap around the image.
I added a media query but It’s still not wrapping when I make the browser smaller.
I attached a screen shot showing the problem
I think the answer here is to use good old-fashioned floats.
Grid is amazing, but it’s not necessary for everything.
It’s just a case of choosing the right tools for the job in hand, not always the newest, shiniest CSS trend.
This example uses nothing but old-school CSS, which is all you need for a simple layout like this.
There is less HTML and less CSS.
No need for grid, media queries or extra div containers.
There is just one problem with the codepen you made using float. Your image has padding around it but it needs to be shown with no padding so an extra div is necessary for the text. I made a codepen of it here:
But my codepen doesn’t render properly when the browser is minimized.
That doesn’t make sense and is not like Sam’s approach. You said you didn’t want padding around the image but the padding in Sams example is on the container not the image so you could just remove the padding from the container. (I’ve no idea why you then gave your extra div a 70% width as that is not logical and will not wrap the image.)
There’s no need for an extra div anyway as you already have a p element that you can add padding to and then it will look like this.
Note that floated content must come first when you want text to wrap around it.
Also note that you can’t apply height to an element that contains wrapping text as you never know what height it will be and everything will overflow as it does in your example. Use a min-height instead if you need an initial height otherwise no height at all is best.
Don’t worry though these are mistakes that all beginners make and doing it wrong is the best way to learn how to do it right 
That was an oversight on forgetting your original design. But as Paul said, it can be fixed by simply moving the padding from the container to the <p> elements.
.bioshorts p {
padding: 0 20px;
}
Here I used padding only on the sides, as the paragraph has its default top/bottom margins.
I also added a little left-margin to the float to space it from the text.
Thanks, SamA74 and PaulOB. I implemented the code you provided at my website here: https://projectpotluck.com/bios
I added a link to my website but it was editted away. Apparently posting about a website isn’t allowed. Now I know.
I’ve reinstated the link. 
(We don’t allow gratuitous self-promotion, but posting a link to your site in the context of getting help with coding is fine.)
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.