Search for the Article

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

 




With this you can utilize the both side spaces as per requirement. We majorly use sidebar for showing ads and call to action there. 

So, Here is the solutions.







<div id="container">
  <div></div>
  <div></div>
  <div></div>
</div>





#container {
  display: flex;                  /* establish flex container */
  flex-direction: row;            /* default value; can be omitted */
  flex-wrap: nowrap;              /* default value; can be omitted */
  justify-content: space-between; /* switched from default (flex-start, see below) */
  background-color: lightyellow;
}
#container > div {
  width: 100px;
  height: 100px;
  border: 2px dashed red;
}