How to add text and image, side by side in HTML

Question

I want to add my text and image side by side but its not working.

<span>
    <h2 class = "pizza-text">People disappoint, but our pizza never does.</h2>
    <img class = "pizza" src="https://www.crushpixel.com/big-static12/preview4/pizza-slice-on-dark-background-1108256.jpg" alt="My image" width="600"  class = my-image>
</span>

score 0 · Answer 1 · answered Feb 02 '21 at 10:45

H1 is a block element and you wrap it illegally in a span. Put it in a div and use an inline-block element

Also the container has to be big enough or the image small enough to have room

You also had two class attributes

Alternative to this is flex

div { width: 100vw; }
.pizza-text, pizza { display: inline-block; float:left;}
.pizza-text { width:45vw }
.pizza { width:45vw; }

<div>
    <h2 class="pizza-text">People disappoint, but our pizza never does.</h2>
    <img class="pizza my-image" src="https://www.crushpixel.com/big-static12/preview4/pizza-slice-on-dark-background-1108256.jpg" alt="My image">
</div>

How to add text and image, side by side in HTML

1 Answers1