How do you align three divs together without pushing a div down

Question

#footer {
      clear: both;
      display: block;
      position: absolute;
      bottom: 0;
    }

    .container-ft {
      display: inline-block;
      vertical-align: top;
      clear: both;
    }

    .container-ft-left {
      width: 40%;
    }

    .container-ft-right {
      width:  40%;
    }

    #barcode {
      margin-top: 48px;
      margin-left: 24px;
      margin-right: 24px;
      background: none;
    }

    .right {
      float: right;
    }

    .left {
      float: left;
    }

<div id="footer">
    <div class="container-ft">
      <div class="container-ft-left left">
    <p>this is a random text to see how it formats the image with the other divs</p>
      </div>
          <div id="barcode" class="left">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e9/UPC-A-036000291452.svg/220px-UPC-A-036000291452.svg.png" alt="barcode"/>
          </div>
      <div class="container-ft-right right">
             <p>this is a random text to see how it formats the image with the other divs</p>
      </div>
    </div>
  </div>

Current when running the code the third div gets push down to the bottom. How do I change it so that all three are aligned to the top. Similarly to how the first 2 divs are aligned. I have tried adding an align to top for the third div but the issue is still there.

I am not sure how to proceed with this and looking for some help to figure it out

Have you considered using 'flex'? – Fabrizio Botalla May 08 '20 at 18:22 — Fabrizio Botalla, May 08 '20 at 18:22

score 1 · Accepted Answer · answered May 08 '20 at 18:27

There are a couple of ways you could do that. The easiest would be using flexbox. Div's are block elements and therefore stack. Alternatively you could also use inline-block

.container-ft {
  display: flex;
}

<div id="footer">
    <div class="container-ft">
      <div class="container-ft-left left">
        <p>this is a random text to see how it formats the image with the other divs</p>
      </div>
      <div id="barcode" class="left">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e9/UPC-A-036000291452.svg/220px-UPC-A-036000291452.svg.png" alt="barcode"/>
      </div>
      <div class="container-ft-right right">
        <p>this is a random text to see how it formats the image with the other divs</p>
      </div>
    </div>
  </div>

score 0 · Answer 2 · answered May 08 '20 at 18:29

Try this:

HTML

<div class="footer">
<div class="column col-left"><p>this is a random text to see how it formats the image with the other divs</p></div>
<div class="column col-center"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e9/UPC-A-036000291452.svg/220px-UPC-A-036000291452.svg.png" alt="barcode"/></div>
<div class="column col-right"><p>this is a random text to see how it formats the image with the other divs</p></div>
</div>

CSS

.column {
  float: left;
  width: 33.33%;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.col-center {
  width: 20%;
  text-align:center;
}

Working version: https://codepen.io/fraggley/pen/YzyaObo

How do you align three divs together without pushing a div down

2 Answers2