How to wrap 3rd div under 2nd div only? Should I use flexbox? [duplicate]
0
This question already has an answer here:
Make a div span two rows in a grid
2 answers
Is it possible for flex items to align tightly to the items above them?
5 answers
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:
html css css3 flexbox
edited Nov 20 '18 at 15:27
TylerH
15.4k105067
asked Nov 20 '18 at 14:26
Clare12345Clare12345
68110
marked as duplicate by Michael_B css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 20 '18 at 16:37
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
|
show 2 more comments
0
This question already has an answer here:
Make a div span two rows in a grid
2 answers
Is it possible for flex items to align tightly to the items above them?
5 answers
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:
html css css3 flexbox
edited Nov 20 '18 at 15:27
TylerH
15.4k105067
asked Nov 20 '18 at 14:26
Clare12345Clare12345
68110
marked as duplicate by Michael_B css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 20 '18 at 16:37
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
1
Could you please share what have you tried as of now. A fiddle will work.
– AKNair
Nov 20 '18 at 14:29
1
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
|
show 2 more comments
0
0
0
This question already has an answer here:
Make a div span two rows in a grid
2 answers
Is it possible for flex items to align tightly to the items above them?
5 answers
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:
html css css3 flexbox
edited Nov 20 '18 at 15:27
TylerH
15.4k105067
asked Nov 20 '18 at 14:26
Clare12345Clare12345
68110
This question already has an answer here:
Make a div span two rows in a grid
2 answers
Is it possible for flex items to align tightly to the items above them?
5 answers
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:
This question already has an answer here:
Make a div span two rows in a grid
2 answers
Is it possible for flex items to align tightly to the items above them?
5 answers
html css css3 flexbox
html css css3 flexbox
edited Nov 20 '18 at 15:27
TylerH
15.4k105067
asked Nov 20 '18 at 14:26
Clare12345Clare12345
68110
edited Nov 20 '18 at 15:27
TylerH
15.4k105067
asked Nov 20 '18 at 14:26
Clare12345Clare12345
68110
edited Nov 20 '18 at 15:27
TylerH
15.4k105067
edited Nov 20 '18 at 15:27
TylerH
15.4k105067
edited Nov 20 '18 at 15:27
TylerH
15.4k105067
15.4k105067
asked Nov 20 '18 at 14:26
Clare12345Clare12345
68110
asked Nov 20 '18 at 14:26
Clare12345Clare12345
68110
asked Nov 20 '18 at 14:26
Clare12345Clare12345
68110
68110
marked as duplicate by Michael_B css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 20 '18 at 16:37
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
marked as duplicate by Michael_B css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 20 '18 at 16:37
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
1
Could you please share what have you tried as of now. A fiddle will work.
– AKNair
Nov 20 '18 at 14:29
1
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
|
show 2 more comments
1
Could you please share what have you tried as of now. A fiddle will work.
– AKNair
Nov 20 '18 at 14:29
1
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
1
1
Could you please share what have you tried as of now. A fiddle will work.
– AKNair
Nov 20 '18 at 14:29
Could you please share what have you tried as of now. A fiddle will work.
– AKNair
Nov 20 '18 at 14:29
1
1
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
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
@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
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
@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
|
show 2 more comments
2 Answers
2
active
oldest
votes
1
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
answered Nov 20 '18 at 14:54
Yandy_VieraYandy_Viera
3,47531237
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 1:05
add a comment |
2
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.
answered Nov 20 '18 at 14:37
RWAMRWAM
4,23022135
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
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
answered Nov 20 '18 at 14:54
Yandy_VieraYandy_Viera
3,47531237
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 1:05
add a comment |
1
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
answered Nov 20 '18 at 14:54
Yandy_VieraYandy_Viera
3,47531237
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 1:05
add a comment |
1
1
1
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
answered Nov 20 '18 at 14:54
Yandy_VieraYandy_Viera
3,47531237
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
.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>.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>answered Nov 20 '18 at 14:54
Yandy_VieraYandy_Viera
3,47531237
answered Nov 20 '18 at 14:54
Yandy_VieraYandy_Viera
3,47531237
answered Nov 20 '18 at 14:54
Yandy_VieraYandy_Viera
3,47531237
answered Nov 20 '18 at 14:54
Yandy_VieraYandy_Viera
3,47531237
3,47531237
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 1:05
add a comment |
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 1:05
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
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 1:05
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 1:05
add a comment |
2
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.
answered Nov 20 '18 at 14:37
RWAMRWAM
4,23022135
add a comment |
2
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.
answered Nov 20 '18 at 14:37
RWAMRWAM
4,23022135
add a comment |
2
2
2
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.
answered Nov 20 '18 at 14:37
RWAMRWAM
4,23022135
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.
.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>.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>answered Nov 20 '18 at 14:37
RWAMRWAM
4,23022135
edited Nov 20 '18 at 14:44
answered Nov 20 '18 at 14:37
RWAMRWAM
4,23022135
answered Nov 20 '18 at 14:37
RWAMRWAM
4,23022135
answered Nov 20 '18 at 14:37
RWAMRWAM
4,23022135
4,23022135
add a comment |
add a comment |
1
Could you please share what have you tried as of now. A fiddle will work.
– AKNair
Nov 20 '18 at 14:29
1
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