HTML adding text beside an Image-CodePudding

Recently started learning html and I have an difficulty adding text right to an image. Thats the code so far:

<!DOCTYPE html>
<html lang="en">

  <head>

<title>Cats</title>

<style>
  .image {
    display: inline-block;
  }

</style>
<style>
  .image1 {
    width: 400px;
    height: 200px;
    overflow: hidden;
    border: 1px solid black;
  }

  .image1 img {
    margin: 0px 0px -105px -155px;
  }

  .image2 {
    width: 400px;
    height: 200px;
    overflow: hidden;
    border: 1px solid black;
  }

  .image2 img {
    margin: 0px 0px -105px -55px;
  }

  .image3 {
    width: 400px;
    height: 200px;
    overflow: hidden;
    border: 1px solid black;
  }

  .image3 img {
    margin: 0px 0px -110px -25px;
  }

  font {
    text-shadow: 1px 1px black
  }

</style>
  </head>

  <body>
<div id="banner" style="overflow: hidden; display: inline-block;">
  <div  style="max-width: 50%; max-height: 50%;">
    <img src="https://images.unsplash.com/photo-1618813576930-12cf7ad6dc31?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8a2l0dGllc3xlbnwwfHwwfHw=&w=1000&q=80" width="400px">
    <font face="arial" size="5px" color="orange"><b>Ginger cat</b></font>

  </div>
  <hr>
  <div  style="max-width: 50%; max-height: 50%;">
    <img src="https://image.shutterstock.com/image-photo/british-shorthair-kitten-silver-color-260nw-1510641710.jpg" width="373px">
    <font face="arial" size="5px" color="White"><b>White cat</b></font>
  </div>
  <hr>
  <div  style="max-width: 50%; max-height: 50%;">
    <img src="https://images.unsplash.com/photo-1595433707802-6b2626ef1c91?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max" width="275px">
    <font face="arial" size="5px" color="Black"><b>Serious cat</b></font>
  </div>
</div>

Tried using style="float:left" or style="float:right" but it didn't work at all. Also do you have any book or video recommandation for HTML?

Thanks for any help.

CodePudding user response：

Best way is to use position You can read about position here

and for your code you can use this as your css

.image1 {
    position: relative;
}

.image1 font {
    position: absolute;
    bottom: 10px;
    left: 10px;
}

also for html tutorial I suggest DevEd on youtube Hope it was useful