How to wrap 3rd div under 2nd div only? Should I use flexbox?

Question

I'm trying to wrap the 3rd div under the 2nd div. The HTML looks like this:

<div class="box">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</div>

How do I get the 3rd div to wrap under the 2nd, but not under the first?

I tried using flexbox, but the 3rd div wrapped under the first. And I tried using flex grid, but the height of the 2nd div has to be flexible because it will contain text. So if there is a lot of text, it would push 3 down a bit.

Currently, the divs are stacked, but I need them to be like the layout on the right:

Could you please share what have you tried as of now. A fiddle will work. — AKNair, Nov 20 '18 at 14:29
Is 1 supposed to grow in height then, so that it matches the height of 2 + 3 and the gutter? If not, floating should do. — misorude, Nov 20 '18 at 14:29
@misorude Yes, 1 should grow in height to match the height of 2 and 3, but if it's not exactly perfectly the same, it will be okay also. 1 contains an image, 2 contains a heading, and 3 contains blog excerpt text. — Clare12345, Nov 20 '18 at 14:31
Why not use two columns, one for the 1 and the second for the 2 and 3. — nikitahl, Nov 20 '18 at 14:34
@nikitahl the code already exists on the site in WordPress. I can't change the HTML, I can only change the CSS. That's why I'm trying to use Flexbox for this. Not sure if it's possible. I'm not sure how I would use columns the way you're suggesting. Do you mean with flexbox? — Clare12345, Nov 20 '18 at 22:58
@Clare12345 Oh, ok, nvm then. But you could've made 2 columns with flexbox, and place 2 and 3 in the second column and also position them with flexbox. If you can, then the grid is the way to go. — nikitahl, Nov 21 '18 at 07:07
@Clare12345 If you're not willing to use the grid for some reason, you can use floats, I've made a fiddle http://jsfiddle.net/v68mpke7/4/, see if it suits your needs. — nikitahl, Nov 21 '18 at 07:24

RWAM · Answer 1 · 2018-11-20T14:44:01.170

You can try grid-template-areas:

.box {
  display: grid;
  grid-gap: 8px;
  grid-template-areas:
    "a a b"
    "a a c";
}

.box > div {
  min-height: 100px;
  padding: 8px;
  background: pink;
}

.one {
  grid-area: a;
}

.two {
  grid-area: b;
}

.three {
  grid-area: c;
}

<div class="box">
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
</div>

To deal with the content you have to play with the other grid properties like grid-template-columns, grid-auto-columns, and so on.

score 1 · Accepted Answer · answered Nov 20 '18 at 14:54

You can wrap the 2 and 3 div in another div and use flex something like this:

.box, other {
  display: flex;
}

.square {
  padding: 38px;
  background: #fc6088;
  margin: 5px;
}

<div class="box">
  <div class="square one">1</div>
  <div class="other">
     <div class="square two">2</div>
     <div class="square three">3</div>
  </div> 
</div>


<div class="box">
  <div class="square one">1</div>
  <div class="other">
     <div class="square two">
     Lorem ipsum dolor sit amet, id cum alia gloriatur. Ius vero dictas expetendis in, aperiri sanctus te sit, ius agam sanctus ex. Quem quodsi petentium quo an, ad cum mundi semper. Vim id nobis facilisis, iudico vituperata vim no, no duo exerci signiferumque.

Fastidii neglegentur per an, et ius semper legimus impedit. Falli eruditi molestiae vim no, adhuc dolor delicatissimi usu in. Cum et nostrud fabellas sensibus. Affert voluptatum vis ei, ad quot doctus mea, in usu velit paulo. Vis meis voluptaria ei, vel ne facilisi salutandi.

Vivendo quaerendum ut cum, nominati urbanitas ut usu, per melius lucilius an. Tacimates suavitate aliquando nec ad, dolor viderer cotidieque his ne, vix malis corpora ea. Bonorum accumsan qualisque eos ne, no ius vide aeque reformidans, sed latine voluptatum eu. Vix mundi omittam an, ea pri noster eruditi docendi, an meis tibique sea.

Ea eos virtute tacimates, tempor persecuti vituperata per in. No eirmod corpora mei, nisl graeci mel et. Eu vel affert recusabo complectitur, simul ridens ex pri. Est eu tritani electram, possit torquatos vix eu. Amet bonorum referrentur vix ea, harum honestatis no vim.

Aliquip persecuti repudiandae pro ea, vel malorum epicurei aliquando ne. Nisl efficiantur per ad, mei te dico laoreet atomorum. An vis movet option signiferumque, vocibus reprimique no ius, stet eleifend intellegebat ut eum. Duo causae hendrerit ex, te tation dicunt nec. Et solum brute error eos, propriae disputationi id cum.
     </div>
     <div class="square three">3</div>
  </div> 
</div>

Check the second snippet with a big text and let me know if that is the desire behavior

your code is correct, but I can't add any more divs into the HTML. It's WordPress and my client needs to be able to edit the site to some extent, so we're using a builder, and I have to use this particular code and try to use CSS to get the desired effect. Unless I add in another plugin that shows some blog excerpts. Thanks though! — Clare12345, Nov 20 '18 at 23:00
Well, so far, this is the best result. For some reason, there is too much space between the heading in #2 and the #3 box in some instances, and not others. I'm not sure why, but it might do for now. Thank you again! — Clare12345, Nov 22 '18 at 01:05

How to wrap 3rd div under 2nd div only? Should I use flexbox?

2 Answers2