Webpage won't resize properly - html

Question

I am attempting to create a business webpage with a two column design. I am trying to have an about us section on one side with some bullets underneath of it. It looks good in the browser in full window view, but when I resize the browser window, my text gets all jumbled and stacked over itself. I am using divs and a container, along with % to place things, but nothing I have tried is working. Any ideas?
Here is the html:
<div class = "aboutuscontainer">
<div class = "abouthead"><h2>About us:</h2></div>
<div class = "aboutinfo"><p>Codes' Decoding is an independant web design company with the consumer's best interests in mind. Created in 2015, we strive to provide only the best in customer satisfaction and web reliability. Since our company is independant, we have the ability to interact directly with the client to offer them the most enjoyable experience possible.</p></div>
<div class = "qualityhead"><h4>Quality:</h4></div>
<div class = "qualityinfo"><p>Here at Codes' Decoding we offer only the highest quality in website design. If you aren't happy, you don't pay. We guarantee you'll love your new site, or your money back!</p></div>
<br>
<div class = "valuehead"><h4>Value:</h4></div>
<div class = "valueinfo"><p>When you work with Codes' Decoding you can be assured that you are receiving the best value on the market. Staying independant keeps us in control of our rates and allows us to keep them low for our valued customers.</p></div>
<br>
<div class = "servicehead"><h4>Service:</h4></div>
<div class = "serviceinfo"><p>Our team at Codes' Decoding is 100% dedicated to making sure your experience is perfect. We are there to answer any questions that you may have and our knowledgable team will ensure you have a smooth experience.</p></div>
</div>
And here is the css:
.aboutuscontainer {
position: relative;
top: 55px;
left: 0%;
border-right: dotted yellow 1px;
max-width: 51.5%;
height: 100%;
}
.abouthead {
position: absolute;
color: yellow;
}
.aboutinfo {
position: absolute;
color: white;
top: 90%;
left: 0px;
line-height: 1.5em;
}
.qualityhead {
position: absolute;
color: yellow;
top: 370%;
left: 2%;
}
.qualityinfo {
position: absolute;
color: white;
top: 370%;
left: 13%;
line-height: 1.5em;
}
.valuehead {
position: absolute;
color: yellow;
top: 570%;
left: 2%;
}
.valueinfo {
position: absolute;
color: white;
top: 570%;
left: 13%;
line-height: 1.5em;
}
.servicehead {
position: absolute;
color: yellow;
top: 790%;
left: 2%;
}
.serviceinfo {
position: absolute;
color: white;
top: 790%;
left: 13%;
line-height: 1.5em;
}

Answer 1

There was enough changes / suggestions that I thought it was worthwhile to create a fiddle for you: https://jsfiddle.net/aaenyenq/
Please note the major revisions to the code:
Rather than absolute, use relative positioning.
Rather than left / top, allow things to flow, and use some widths.
Get the desired left / right arrangement with a method such as display: inline-block or float: left (I tend to prefer display: inline-block).
Simplify the code. Eliminate unnecessary divs (such as around the h2 and h4 elements), and use container classes and more generic markup.
Removed <br> tags. You should never use them for spacing. Use margins / padding instead.
Simplified / revised HTML:
<div class = "aboutuscontainer">
<h2>About us:</h2>
<div class="aboutinfo"><p>Codes' Decoding is an independant web design company with the consumer's best interests in mind. Created in 2015, we strive to provide only the best in customer satisfaction and web reliability. Since our company is independant, we have the ability to interact directly with the client to offer them the most enjoyable experience possible.</p></div>
<div class="listitem">
<h4>Quality:</h4>
<div><p>Here at Codes' Decoding we offer only the highest quality in website design. If you aren't happy, you don't pay. We guarantee you'll love your new site, or your money back!</p></div>
</div>
<div class="listitem">
<h4>Value:</h4>
<div><p>When you work with Codes' Decoding you can be assured that you are receiving the best value on the market. Staying independant keeps us in control of our rates and allows us to keep them low for our valued customers.</p></div>
</div>
<div class="listitem">
<h4>Service:</h4>
<div><p>Our team at Codes' Decoding is 100% dedicated to making sure your experience is perfect. We are there to answer any questions that you may have and our knowledgable team will ensure you have a smooth experience.</p></div>
</div>
</div>
Simplified CSS:
.aboutuscontainer {
position: relative;
margin-top: 55px;
left: 0%;
border-right: dotted yellow 1px;
max-width: 51.5%;
height: 100%;
}
.aboutuscontainer h2 {
color: yellow;
}
.aboutinfo {
color: white;
line-height: 1.5em;
}
.listitem h4 {
display: inline-block;
vertical-align: top;
width: 20%;
color: yellow;
}
.listitem div {
display: inline-block;
vertical-align: top;
width: 78%;
color: white;
}
NOTE: IF you want different spacing for different sections, you can easily just add a class to the listitem div element, then address the different spacing like so:
(Assuming you added a class "service" - <div class="listitem service">):
.listitem.service h4 {
width: 25%;
}
.listitem.service div {
width: 73%;
}

Answer 2

Try not to use position absolute. I fixed some css for you here. I used float left, and % on the width.
https://jsfiddle.net/gefp9bnd/
.qualityhead {
color: yellow;
width: 30%;
float:left;
}
Hope that helps.