CODEWITHSUNDEEP
htmlcss
Jakoby
Jakoby

Reputation: 21

HTML adding text beside an Image

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

.image {
  display: inline-block;
}
.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;
}
<div id="banner" style="overflow: hidden; display: inline-block;">
  <div class="image1" style="max-width: 50%; max-height: 50%;">
    <img src="https://images.unsplash.com/photo-1618813576930-12cf7ad6dc31?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8a2l0dGllc3xlbnwwfHwwfHw%3D&w=1000&q=80" width="400px">
    <font face="arial" size="5px" color="orange"> <b>Ginger cat</b></font>
</div>
<hr>
<div class="image2" 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 class="image3" 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 didnt work at all. Also do you have any book or video recommandation for HTML?

Thanks for any help.

Upvotes: 0

Views: 412

Answers (1)

Afshar Sharifi
Afshar Sharifi

Reputation: 152

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

Upvotes: 1

Related Questions