I recently started working on a new project with CodePen where I am building a website from the ground up. Each section of the site is meant to be a full page, which is why I implemented the section class. Within my first section (about), I have created two divs. My goal is for the layout to remain consistent regardless of browser size. However, I am encountering issues with the positioning of the aboutInfo div when the window is resized, despite setting its position to absolute.
Here is the current snippet of code:
#about {
background-color: #D1C9BE;
position: relative;
}
#aboutImage {
border-style: dashed;
border-color: red;
background-color: white;
position: absolute;
height: 150px;
width: 150px;
top: 50%;
transform: translateY(-50%);
left: 300px;
}
#aboutInfo {
border-style: dotted;
border-color: black;
background-color: white;
font-size: 35px;
text-align: right;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 200px;
}
I have explored various solutions such as Flexbox, jQuery, as well as adjustments to margin and padding. At this point, I am unsure which approach would be most effective and user-friendly.
In summary, my questions are:
How can I resolve the issue of the aboutInfo div moving around?
How can I ensure that the content of the website automatically resizes to fit any browser size?