An example of how to align divs side by side using HTML <img> tag too

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .container {
        width: 600px;
        height: 190px;
        background-color: #5cbbf2;
        padding: 35px 15px 5px;
      }
      .container:before,
      .container:after {
        content: "";
        display: table;
        clear: both;
      }
      .container div {
        float: left;
        width: 180px;
        height: 160px;
      }
      #box2 {
        background-color: #000000;
        margin-left: 30px;
        margin-right: 30px;
      }
      p {
        color: white;
        padding: 5px 10px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h2>W3docs</h2>
    <div class="container">
      <div id="box1">
        <img src="https://pp.userapi.com/c622225/v622225117/10f33/47AAEI48pJU.jpg?ava=1" style="width:180px; height:160px;">
      </div>
      <div id="box2">
        <p> We can create as many divs as many we want side by side with the same height and also with the different heights. </p>
      </div>
      <div id="box3">
        <img src="https://pp.userapi.com/c622225/v622225117/10f33/47AAEI48pJU.jpg?ava=1" style="width:180px; height:160px;">
      </div>
    </div>
</html>