CODEWITHSUNDEEP
htmlcss
Question3r
Question3r

Reputation: 3762

multiple div containers with different floatings in one row

I want to achieve something like this

floatings

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?

Upvotes: 2

Views: 51

Answers (2)

Paulie_D
Paulie_D

Reputation: 115045

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>

Upvotes: 1

95faf8e76605e973
95faf8e76605e973

Reputation: 14191

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>

Upvotes: 2

Related Questions