Module 4: Working with Media

Mountain Landscape (JPEG/JPG File Format): For this part of my media page, I wanted to show how an image can wrap around text using CSS. I floated the image to the left with the float: left; property so the text flows beside it instead of pushing everything underneath the picture right away.

I also split the description into multiple paragraphs so it's easier to see how the text wraps around the image. This creates a cleaner layout and makes the page look more organized while keeping the picture next to the information being described. Using a float is a simple way to position images without needing more advanced layout tools.

As more text is added, the browser continues placing each line next to the image until it reaches the bottom of the picture. After there is no more vertical space available, the remaining text automatically moves underneath the image. This behavior helps demonstrate how floating images affect the layout of a webpage and how surrounding content adjusts itself automatically.