r/css•
Sandarian1999

Issues with having text under an image

Hello all! I'm pretty new to HTML5 and I'm working on creating a website with just images and a couple paragraphs of text. I'm trying to layout images with some text underneath, but I also want separate text to wrap around said image. I can't seem to have separate text underneath the image without putting it inline with the text I want separate and then it doesn't look like a caption anymore, or it just puts a bunch of empty space like a big margin that I can't have text going through. I got it to work with other images that don't need text wrapped around them, the issue is just with the wrapping. Does anyone know what kind of tags I should be looking for or resources detailing this?

Here's the chunk of code.

<html>

<head>

<style>

body {background-color:ivory; font-family:helvetica; color:sienna; padding-left:80px;width:825px}

h2 {text-align:center;}

img {padding:6px; border-width:1px; border-style:solid; border-color:burlywood;text-align: middle;}

table {font-size:14px}

caption {caption-side:bottom;padding-top:4px}

</style>

<h2>

<b style = "color:darkred;font-size: 20px;"> Samuel Finley Breese Morse - artist, photographer, inventor - and more </b>

</h2>

</head>

<body>

<img src="pic/John_Adams-SFBMorse.jpg" alt = "Morse's Portrait of Adams" width="140px"

style="margin-left:50px;margin-top:20px;margin-right:10px;vertical-align:top"/>

<img src="pic/800px-International_Morse_Code.png" alt = "Morse code, with instructions" width="480px" style="margin-right:20px;margin-top:20px;float:right"/>

<p style="margin-left:40;margin-top:5px;width:400px">

Morse's Portrait of Adams

</p>

<img src="pic/Morse_telegraph.jpg" alt = "The device" width = "90" style="margin-left:110px;"/>

<p style="margin-left:105px;margin-top:5px">

The Device

</p>

<p style="display:inline"> <img src="pic/Samuel_Morse_with_his_Recorder_by_Brady,_1857.png" alt="The Person" width="100px" align="right" style="margin-top: 15px;margin-bottom:5px;margin-right:5px"/>

Samuel Finley Breese Morse, (April 27, 1791 - April 2, 1872) was an American painter and inventor.

After having established his reputation as a portrait painter, in his middle age Morse contributed to the invention of a single-wire telegraph system based on European telegraphs.

He was a co-developer of Morse code and helped to develop the commercialuse of telegraphy.

</p>

</body>

</html>

Any help is appreciated. Thank you!

Edit: thank you guys so much! This helped a ton

Posted Jun 4, 2020, 11:47 PM UTC · edited

54
Loading comments…