My latest project involves creating a business webpage with a two-column layout. I want to showcase an "About Us" section on one side, complete with bullet points below it. Everything looks great when viewing the page in full screen, but as soon as I resize the browser window, the text becomes messy and starts overlapping. I've been using divs, containers, and percentages to position elements, but nothing seems to be working. Any suggestions?
Below is the HTML code:
<div class = "aboutuscontainer">
<div class = "abouthead"><h2>About us:</h2></div>
<div class = "aboutinfo"><p>Codes' Decoding is an independent web design company that prioritizes customer satisfaction and reliability. Established in 2015, we aim to offer top-notch services directly tailored to our clients for a personalized experience.</p></div>
<div class = "qualityhead"><h4>Quality:</h4></div>
<div class = "qualityinfo"><p>At Codes' Decoding, we guarantee high-quality website designs where your satisfaction is our priority. If you're not satisfied, you don't pay - simple as that!</p></div>
<br>
<div class = "valuehead"><h4>Value:</h4></div>
<div class = "valueinfo"><p>By choosing Codes' Decoding, you get the best value in the market. Our independence allows us to set competitive rates while maintaining exceptional service for our esteemed clients.</p></div>
<br>
<div class = "servicehead"><h4>Service:</h4></div>
<div class = "serviceinfo"><p>Our dedicated team at Codes' Decoding ensures a flawless experience for every client. We're always available to address any inquiries, making sure you have a seamless journey during our collaboration.</p></div>
</div>
And here is the CSS code:
.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;
}