Keep div height the same despite resizing a window - html

Question

When I resize the window text from multiple divs overlaps onto another.
I believe it is maybe because my height values apply for percent of the screen, not percent of the div as I would like. What I would like for now (unless someone has a better idea) is instead of vertical div size decreasing have it stay fixed, therefore preventing the text from being pushed onto another div.
I've seen similar posts but none of them seemed to specifically address my issue.
Any help would be greatly appreciated!
EDIT: I want the div height to stay the same despite reducing window size.
FINAL EDIT: I will deal with this issue when I finish my computer-compatible site and then work on making it mobile-compatible.
JsFiddle:
http://jsfiddle.net/v5aobbp3/
<div id="moreinfo" class="wrapperdiv">
<div id="topquote">
<br> <br>
<p id="quote"> “ Musical activity involves nearly every region of the brain that we know about, and nearly every neural subsystem ” </p>
<p id="quote2"> — Daniel Levitin, <em> This is Your Brain on Music, </em> p.299 </p>
</div>
<div id="benefits-main">
<div id="top-row">
<div id="leftfact">
<p class="benefits-title"> express yourself</p> <br>
<p id="bodytext"> Music is the best way for you to express yourself, unleash your creativity, and get inspired. Immerse yourself or your children in the world of music through musical education to produce an enhanced appreciation and understanding of this art </p>
</div>
<div id="centrefact">
<p class="benefits-title"> improved cognitive abilities </p> <br>
<p id="bodytext"> The auditory precision required in music study results in dramatic improvements in language abilities. Musically trained children are able to distinguish subtleties of speech, resulting in increased verbal, comprehension, reading, and communication skills. Students of music have better information processing, stronger neural connections, improved memory, and bigger brains in general.
</div>
<div id="rightfact">
<p class="benefits-title"> increased focus and academics</p>
<p id="bodytext"> Music gives its learners an increased attention span and stronger focus as well as self-discpline. Children who learn music have higher IQs and better motor coordination. Studies have found that music students significantly outperform academically compared to other students and are more motivated.
</div>
</div>
<div id="bottom-row">
<div id="leftfact2">
<p class="benefits-title"> empathy and social awareness </p> <br>
<p id="bodytext"> Musical education increases empathy in children as well as improves their emotional intelligence and interpretation of nuances of speech. Music is emotional and through this art students learn to connect with others on an emotional level. While performing with other musicians students increase their cooperation skills. </p>
</div>
<div id="centrefact2">
<p class="benefits-title"> self-confidence </p>
<p id="bodytext"> Performing as well as self-discipline give students a high level of confidence </p>
</div>
<div id="rightfact2">
<div id="button2">
<p class="button2text"> Learn More </p>
</div>
</div>
</div>
</div>
<div id="bottomquote">
<br>
<p id="musicquote" class="Einstein"> "The theory of relativity occurred to me by intuition, and music is the driving force behind this intuition. My parents had me study the violin from the time I was six. My new discovery is the result of musical perception.” </p> <br>
<p id="quote2" class="Einstein"> — Albert Einstein </p>
</div>
</div>
And some of the pertinent css:
div #moreinfo {
background-color: #F1F1F1;
/* #d3dfed; original colour */
color: black;
height: 150%;
margin-top: 0%;
/* position: relative; */
}
#moreinfo #benefits-main {
background-color: #d3dfed;
height: 60%;
width: 100%;
}
#benefits-main #top-row { height: 50%; } #benefits-main #bottom-row { height: 50%; }
#benefits-main .benefits-title { margin-top: 2%;}
#benefits-main #leftfact { height: 100%; width: 33%; float: left; background- color: #b7cbe2; } #benefits-main #leftfact2 { height: 100%; width: 33%; float: left;
background-color: #c5d5e7; /*background-color: white;*/}
#benefits-main #centrefact { height: 100%; width: 33%; float: left; background-color: #c5d5e7; /* background-color: white;*/} #benefits-main #centrefact2 {height: 100%; width: 33%; float: left;
background-color: #b7cbe2;}
#benefits-main #rightfact { height: 100%; width: 33%; float: left; background-color: #b7cbe2; /* #e1e9f3; */} #benefits-main #rightfact2 {height: 100%; width: 33%; float: left;
background-color: #c5d5e7; /* background-color: white;*/ }
#button2 {
height: 20%;
width: 40%;
background-color: #4a79b1;
margin-top: 28%;
margin-right: auto;
margin-left: auto;
font-weight: 300;}
#button2 p {
font-family: Avenir Next, sans-serif !important;
color: #FFFFFF !important;
font-weight: 200 !important;
padding-top: 7%;
}
.button2text {
color: white;
}
a.rcmlink:link { color: #EEEEEE; } a.rcmlink:visited { color: #EEEEEE; } a.rcmlink:active {color: #EEEEEE;}
#benefits-main #bodytext {
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
}
#moreinfo p {
margin-left: 10%;
margin-right: 10%;
color: #22384f;
font-size: 25px;
font-family: Montserrat , sans-serif;
}
div #topquote {
background-color: #d3dfed; /* #9bb7d6; */
height: 20%;
}
#topquote #quote {
/* position: absolute; /* top: 5%; */
text-align: center;
}
#topquote #quote2 {
text-align: center;
font-size: 20px;
font-family: Roboto;
bottom: 2%;
}
/* #topquote2 { background-color: #d3dfed; height: 10%; } */
div #bottomquote {
text-align: center;
height: 20%;
}
#quote2 {
font-size: 15px;
font-family: Roboto !important;
}
div #musicquote {
/* position: absolute; bottom: 2.5%; */
}

Answer 1

Putting heights on divs forces the text to overflow once they are too small to contain the text. If you let the divs height stay auto and controlled spacing around them with padding top/bottom then they would automatically get longer to fit the text as you resize the window.
Not sure if this really answers your question but I'm not exactly sure what you are asking?

Answer 2

I've pulled out just that row into a stripped down example. The most important CSS is this:
.row {
display: table;
table-layout: fixed;
width: 100%;
}
.fact {
display: table-cell;
}
html {
color: #22384F;
font-size: 12px;
font-family: sans-serif;
}
.row {
display: table;
table-layout: fixed;
width: 100%;
}
.fact {
display: table-cell;
padding: 20px;
background-color: #B7CBE2;
}
.fact:nth-child(even) {
background-color: #C5D5E7;
}
.benefits-title {
font-size: 25px;
font-family: Montserrat , sans-serif;
margin: 0;
}
<div class="row">
<div class="fact">
<p class="benefits-title"> express yourself</p> <br>
<p> Music is the best way for you to express yourself, unleash your creativity, and get inspired. Immerse yourself or your children in the world of music through musical education to produce an enhanced appreciation and understanding of this art </p>
</div>
<div class="fact">
<p class="benefits-title"> improved cognitive abilities </p> <br>
<p> The auditory precision required in music study results in dramatic improvements in language abilities. Musically trained children are able to distinguish subtleties of speech, resulting in increased verbal, comprehension, reading, and communication skills. Students of music have better information processing, stronger neural connections, improved memory, and bigger brains in general.
</p></div>
<div class="fact">
<p class="benefits-title"> increased focus and academics</p>
<p> Music gives its learners an increased attention span and stronger focus as well as self-discpline. Children who learn music have higher IQs and better motor coordination. Studies have found that music students significantly outperform academically compared to other students and are more motivated.
</p></div>
</div>
Using display: table-cell means that each div in your row will always have the same height. You want to avoid assigning your HTML elements heights at all unless you really know what you're doing: things can get messy very quickly.
You'll notice I've also changed things up a bit, removing your IDs and replacing them with classes. There's good reason for that: it keeps the specificity of your selectors low, which will make things much easier to maintain in the long run. It also lets you re-use styles and avoid having to come up with unique IDs (such as #leftfact2) when they aren't required.
Having the same ID repeated multiple times is also wrong, and will cause headaches if you want the page to validate or - more importantly - start adding JavaScript. I would recommend avoiding the use of IDs for styling altogether (that's somewhat controversial, but smarter people than me say the same thing).