How to Line Up 3 Divs on The Same Row

How to align 3 divs (left/center/right) inside another div?

With that CSS, put your divs like so (floats first):

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
  <div id="center"></div>
</div>

P.S. You could also float right, then left, then center. The important thing is that the floats come before the "main" center section.

P.P.S. You often want last inside #container this snippet: <div style="clear:both;"></div> which will extend #container vertically to contain both side floats instead of taking its height only from #center and possibly allowing the sides to protrude out the bottom.

horizontal alignment of 3 divs on the same line

.left-col {
    float: left;
    width:25%;
}
.center-col {
    float: left;
    width: 50%;
}
.right-col {
    float: left;
    width: 25%;
}

<div class="left-col">purple</div>
<div class="center-col">monkey</div>
<div class="right-col">dishwasher</div>

3 divs on same row inside other div

I would go with flex-box since it have high support now.

.div-box {  width: 500px;  margin: 0 auto;  display: flex;}
.left {  width: 200px;  background-color: red;  display: flex;}
.mid {  width: 200px;  display: flex;}
.right {  width: 50px;  background-color: black;  display: flex;}

<div class='div-box'>  <div class='left'></div>  <div class='mid'>    <p>Cardigan knausgaard kinfolk humblebrag hashtag. Chambray banh mi mustache, quinoa flannel craft beer tacos vinyl. Ethical swag everyday carry, typewriter crucifix mustache cornhole next level iPhone squid. Slow-carb flannel chambray man bun, migas  </p>  </div>  <div class='right'></div></div>

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

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>

---

Related Topics