Placing imgs in alternating order (left then right)

[drone4four]

I’m trying to place images in alternating order (first left, then right, then left, and so on) next to paragraph text.

Here is my reduced test case: https://codepen.io/Angeles4four/pen/GmWYow

I’m also trying to get the text to wrap around each image.

I can’t figure it out. I encountered Chris Coyier’s guide on floats: https://css-tricks.com/all-about-floats/
So I tried swapping out the ‘display’ property value from ‘inline’ to ‘block’. No change. What am I doing wrong?

Thanks for your attention.

[Beverleyh]

Your CSS is fine… just the selector that is off.

You’ve used img .right Note the space; this is the syntax for when .right is a child element of img (which isn’t possible, but back to the problem).

the img is the element with the .right class, so the syntax should be img.right, without the space.

You could simply use .right in your stylesheet too – the img part isn’t necessary, except for when targeting specifically an img with the ‘right’ class applied within the markup. Other elements may have the ‘right’ class applied too, such as span.right

[Author]

Posts