a text next to a picture in html-CodePudding

as homework we have to do a simple website and one of the exercises is to put text right next to a picture and i have no idea how to do it

  <img src="logo.png" style="width: 80px;"><h2>blabla</h2>

this just puts it below the picture. I know that i can do this

<img scr="logo.png" style="width: 80px;">blabla</img>

but it has do be with the h2 tag cause i customized it in a css file

here is the full html site bc ppl asked for context

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        
        <link rel="stylesheet" href="stil.css">

        <title>OS News</title>

    </head>
    <body>
        <h1>lol</h1>
        <div class="h">
            <img src="logo.png" style="width: 80px;">blablaBLABLA
        </div>
        <h3>lololo</h3>
        <h4>kakakka</h4>
        <p id="idk">lorum ipsom</p>
        <div id="impressum-etc">
            <ul>
                <li href="lol.css">bruh</li>
                <li href="lol.html">bruh</li>
                <li>blabla</li>
            </ul>
        </div>
    </body>
</html>

and here is the css

h1 {
  color: blue;
  font-family: "Arial";
  font-size: 18px;
}
h2 {
  color: blue;
  font-family: "Arial";
  font-size: 16px;
}
h3 {
  color: grey;
  font-family: "Times";
  font-size: 14px;
}
h4 {
  font-family: "Arial";
  font-size: 12px;
  font-weight: bold;
}
#idk {
  font-size: 12px;
}
#impresum-etc {
    color: brown;
  font-size: 12px;
}

CodePudding user response：

Like this? I change a little bit the class names.

h1 {
  color: blue;
  font-family: "Arial";
  font-size: 18px;
}
h2 {
  color: blue;
  font-family: "Arial";
  font-size: 16px;
}
h3 {
  color: grey;
  font-family: "Times";
  font-size: 14px;
}
h4 {
  font-family: "Arial";
  font-size: 12px;
  font-weight: bold;
}
#idk {
  font-size: 12px;
}
#impresum-etc {
    color: brown;
  font-size: 12px;
}

.container {    
    overflow: auto
}
.thumb {
    float: left
}
.thumb img {
    display: block
}
.content {
    margin-left: 180px;
}
.title {
    font-weight: bold;    
}

  <div class="container">                
  <div class="thumb">
      <img src="https://via.placeholder.com/150/000" />
  </div>
  <div class="content">
      <h1 class="title">Post title</h1>
      <p>blablaBLABLA </p></div>
  </div>

  <h3>lololo</h3>
  <h4>kakakka</h4>
  <p id="idk">lorum ipsom</p>
  <div id="impressum-etc">
      <ul>
          <li href="lol.css">bruh</li>
          <li href="lol.html">bruh</li>
          <li>blabla</li>
       </ul>
   </div>

CodePudding user response：

This is (almost) the only case for using CSS float.

If you set float: left on the image then the text will be next to it. Additionally if the text is very long compared to the image size then the text will flow round the image at the bottom, like you see images embedded in text in papers for example.

<img src="https://picsum.photos/id/237/100/100" style="width: 80px; float: left;">
<h2>blabla</h2>
<br style="clear: both;">
<img src="https://picsum.photos/id/237/100/100" style="width: 80px; float: left;">
<h2> blabl blabla blabla blabla blabla a blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabl blabla blabla blabla blabla a blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla
  </h2>