Why don't my divs stack on browser resize? - html

Question

I'm a newbie and trying to figure out how to stack these two boxes on top of each other when the browser gets resized. I don't want to use float, I'd rather stick to inline-block unless anyone else has strong suggestion against it. I was thinking I guess in using inline-block that the boxes would stack when the div got resized with the browser but it isn't happening. The boxes are just getting skinner and skinner and the text just wraps and exceeds the box. `
.cp2_maincontainer {
width: 100%;
height: 300px;
font-size: 0;
display: flex;
justify-content: space-between;
padding: 10px 50px 20px 50px;
}
.cp2_container {
width: 47%;
height: 100%;
background: no-repeat center;
display: inline-block;
position: relative;
}
.cp2_subcontainer {
background-color: rgba(211, 211, 211, .8);
height: 100%;
width: 100%;
padding: 10px 15px;
font-size: 16px;
font-family: playfair display;
position: absolute;
outline: solid 2px darkgrey;
outline-offset: -10px;
}
.cp2_subcontainer ul {
margin-left: 20px;
}
.cp2_subcontainer p {
margin: 10px;
}
.cp2_subcontainer h3 {
padding: 10px 0;
}
.cp2_container2 {
background-color: darkgrey;
background: no-repeat center;
width: 47%;
height: 100%;
display: inline-block;
position: relative;
}
.cp2_subcontainer2 {
background-color: rgba(211, 211, 211, 0.8);
height: 100%;
width: 100%;
padding: 10px 15px;
font-size: 16px;
font-family: playfair display;
position: absolute;
outline: solid 2px darkgrey;
outline-offset: -10px;
}
.cp2_subcontainer2 ul {
margin-left: 20px;
}
.cp2_subcontainer2 p {
margin: 10px;
}
.cp2_subcontainer2 h3 {
padding: 10px 0;
}
.addtextarea {
color: black;
padding: 10px;
width: 100%;
font-size: 16px;
text-align: justify;
}
<div class="cp2_maincontainer">
<div class="cp2_container" style="background-image:URL(<?php the_field('imageleft'); ?>)">
<div class="cp2_subcontainer">
<h3 style="text-align:center;">Title for Text Box 1</h3>
<p>Text in box # 1</p>
</div>
</div>
<div class="cp2_container2" style="background-image:URL(<?php the_field('imageright'); ?>)">
<div class="cp2_subcontainer2">
<h3 style="text-align:center;">Title for Text Box 2</h3>
<p>Text in box #2</p>
</div>
</div>
</div>
<div class="sectionbreak" align="center"></div>

Answer 1

You gave the divs a width in percentage. That means that as their container grows smaller, so do they, and they never have a reason to break. The obvious solution is to give them a fixed width (px, em).
If for some reason you need the percentages to work up to a certain point (for the purpose of bigger screens for example), two options come to mind:
Give the divs a min-width, so that once they hit that width the percentages will be ignored and the line will break.
Using media queries, define a different width for them based on screen size.

Answer 2

.cp2_maincontainer {
width:100%;
height:300px;
font-size: 0px;
display:flex;
justify-content: space-between;
padding: 10px 50px 20px 50px;
}
.cp2_container {
width:47%;
height:100%;
background: no-repeat center;
display:inline-block;
position: relative;
}
.cp2_subcontainer {
background-color: rgba(211, 211, 211, 0.8);
height:100%;
width:100%;
padding:10px 15px;
font-size:16px;
font-family: playfair display;
position: absolute;
outline:solid 2px darkgrey;
outline-offset: -10px;
}
.cp2_subcontainer ul{
margin-left:20px;
}
.cp2_subcontainer p{
margin:10px;
}
.cp2_subcontainer h3{
padding:10px 0px;
}
.cp2_container2 {
background-color: darkgrey;
background: no-repeat center;
width:47%;
display:inline-block;
position: relative;
min-width: 300px;
position: absolute;
right: 0;
height:300px;
}
.cp2_subcontainer2 {
background-color: rgba(211, 211, 211, 0.8);
height:100%;
width:100%;
padding:10px 15px;
font-size:16px;
font-family: playfair display;
position: absolute;
outline:solid 2px darkgrey;
outline-offset: -10px;
}
.cp2_subcontainer2 ul{
margin-left:20px;
}
.cp2_subcontainer2 p{
margin:10px;
}
.cp2_subcontainer2 h3{
padding:10px 0px;
}
.addtextarea {
color: black;
padding: 10px;
width: 100%;
font-size: 16px;
text-align: justify;
}
<div class="cp2_maincontainer">
<div class="cp2_container" style="background-image:URL(<?php the_field('imageleft'); ?>)">
<div class="cp2_subcontainer">
<h3 style="text-align:center;">Title for Text Box 1</h3>
<p>Text in box # 1</p>
</div>
</div>
<div class="cp2_container2" style="background-image:URL(<?php the_field('imageright'); ?>)">
<div class="cp2_subcontainer2">
<h3 style="text-align:center;">Title for Text Box 2</h3>
<p>Text in box #2</p>
</div>
</div>
</div>
<div class="sectionbreak" align="center">
</div>
I think this is what you are trying to accomplish.
I have added/edited the following on .cp2_container2
min-width: 300px;
position: absolute;
right: 0;
height:300px;
You need a min-width in order to have the 2 boxes overlap, otherwise they will always be half the width of the page and never overlap.
Positioning absolutely allows the div to freely pass over the statically positioned one.
Right just tells the div to position at the right edge of whatever it is relative to, in this case the body.
By positioning absolutely the height 100% becomes relative to the entire window, I have solved by using a pixel height, although you could also position the cp2_maincontainer relative and given it a height, making the height 100% of cp2_container2 relative the height of cp2_maincontainer.
Good luck.