multiple div containers with different floatings in one row

Question

I want to achieve something like this

and I thought about using a flexbox to put these items in one row.

#container {
  display: flex;
}

<div id="container">
  <div class="box">
    <p>
      Text Box 1.1
    </p>
    <p>
      Text Box 1.2
    </p>
  </div>

  <div class="box">
    <p>
      <a>Link</a>
    </p>
    <p>
      Text Box 2
    </p>
  </div>

  <div class="box">
    <p>
      Text Box 3.
    </p>
  </div>

</div>

The first and the second div container should have the default alignment on the left side. The third container should be aligned at the right side of the parent container.

I don't want to use flex: 1 because on large screen sizes the spacing between div 1 and 2 would be too big. They should be placed close to each other.

When the screen size gets smaller, the space between the second and the third container should get smaller until the third container is next to the second container. To prevent the overlap I simply want to remove the flexbox with

@media(max-width: 500px){ /* just a sample width */
  #container{
    display: block
  }
}

How can I achieve that?

Does [this answer](https://stackoverflow.com/questions/38948102/center-and-right-align-flexbox-elements#38948646) not help you? It seems to me that you want to achieve the same. — luke-codewalker, Aug 18 '18 at 08:16

95faf8e76605e973 · Accepted Answer · 2018-08-18T09:05:15.373

This could be a solution to your problem.

I added <div id="separator"> to separate (box 1 & 2) from (box 3). After that I used
justify-content: space-between; on the main container

See demo below:

#container {
  display: flex;
  justify-content: space-between;
}
#separator{
  display: flex;
}
.box{
  border: 1px solid black;
}
@media screen and (max-width: 500px) { /* just a sample width */
  #container, #separator{
    display: block;
  }
}

<div id="container">
<div id="separator">
   <div class="box">
      <p>
         Text Box 1.1
      </p>
      <p>
         Text Box 1.2
      </p>
   </div>
   <div class="box">
      <p>
         <a>Link</a>
      </p>
      <p>
         Text Box 2
      </p>
   </div>
</div>
<div class="box">
   <p>
      Text Box 3.
   </p>
</div>

score 1 · Answer 2 · answered Aug 18 '18 at 16:26

No need to add extra HTML just add margin-left:auto to the last box

#container {
  display: flex;
}

.box {
  border: 1px solid green;
  margin: 0 .25em
}

.box:last-child {
  margin-left: auto;
}

<div id="container">
  <div class="box">
    <p>
      Text Box 1.1
    </p>
    <p>
      Text Box 1.2
    </p>
  </div>

  <div class="box">
    <p>
      <a>Link</a>
    </p>
    <p>
      Text Box 2
    </p>
  </div>

  <div class="box">
    <p>
      Text Box 3.
    </p>
  </div>

</div>

multiple div containers with different floatings in one row

2 Answers2