So, I'm trying to make a "about me page" I have a title near the top, a body and a picture to the right. My goal was to have the the title at the top and the body and picture aligned center to the middle of the page. But quickly realized that it would have to be absolute and might be hassle.
With that, I was at least trying to have a the container take up the remaining viewport (because the navbar & title take up space) and center the elements within that.
Here's what it looks like: Div not taking up rest of viewport
Here is HTML:
<h1 id="about-header">// About Me</h1>
<div id="about-content">
<img id="pfp" src="/images/profile/KingPr0o7 (1080).jpg">
<p id="about-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sollicitudin scelerisque condimentum. Sed porta felis eget libero lacinia interdum. Donec non tellus rutrum, convallis enim sit amet, sollicitudin lacus. Ut cursus elit metus, non suscipit nunc interdum vitae. Aliquam efficitur urna non sem lobortis ullamcorper. Fusce venenatis rutrum quam at posuere. Aenean dui dui, laoreet ac eros eu, cursus tempus lectus. Nullam condimentum nisi non tortor placerat scelerisque. Pellentesque at lectus erat. Donec elit metus, egestas in diam sit amet, mollis posuere diam. Maecenas fringilla finibus purus sed elementum. Nullam neque dui, venenatis sed imperdiet et, cursus sit amet velit. Morbi vulputate cursus vehicula. Suspendisse egestas aliquam sapien, vel finibus massa pharetra in. Donec placerat risus in massa luctus eleifend. Vivamus dignissim lorem eros, vel feugiat arcu faucibus at. <br><br> Phasellus et rutrum ipsum. Sed fermentum eu dolor a semper. Proin vulputate, leo id ultricies scelerisque, felis libero sagittis enim, fringilla iaculis augue neque sed dui. Pellentesque in libero viverra, rhoncus diam et, tincidunt velit. Ut pulvinar dapibus nisi non interdum. Cras feugiat efficitur metus dapibus hendrerit. Phasellus id mauris tincidunt dolor placerat eleifend ut eget lectus. Sed euismod nisl odio, eu placerat elit dignissim sed. Quisque dui dolor, luctus eget posuere in, ultrices eget lectus. Sed interdum lorem arcu, nec dapibus massa imperdiet vel. Integer molestie est diam, ac mattis tortor venenatis nec. Donec vitae tellus magna. Vestibulum maximus bibendum dui ut blandit. Maecenas placerat est enim, nec vestibulum augue vestibulum id. Proin nec viverra sapien, sit amet vestibulum libero. Sed aliquet ante vitae pellentesque elementum. <br><br> In feugiat ipsum quis felis vulputate sodales. Fusce eleifend, ex ac viverra vehicula, justo sem rutrum diam, ut interdum lorem ipsum sed mauris. Phasellus pretium vestibulum arcu eget volutpat. Curabitur justo tortor, posuere vel aliquam eu, tempor quis nisi. Maecenas mauris nulla, dignissim ut erat sagittis, imperdiet bibendum erat. Curabitur vitae sem tortor. Aliquam ac interdum massa. In iaculis volutpat dolor et aliquam. Phasellus volutpat justo id lacus laoreet, at vehicula orci interdum. Nam consectetur faucibus ornare. Fusce rutrum blandit sem malesuada blandit. Maecenas lacinia egestas tellus iaculis vehicula. Mauris dui nulla, suscipit vel interdum a, hendrerit semper dui. <br><br> Nam vitae risus a lectus sagittis suscipit in et nulla. In cursus placerat egestas. In hac habitasse platea dictumst. Aenean tempor efficitur risus non elementum. Ut fermentum semper posuere. Curabitur porttitor nisl felis, non varius purus posuere sed. In hac habitasse platea dictumst. Pellentesque posuere turpis sollicitudin velit iaculis condimentum. Curabitur sed blandit urna, quis maximus elit. <br><br> Vivamus molestie, eros vel cursus efficitur, turpis dolor tristique ipsum, elementum posuere magna odio nec velit. Fusce placerat molestie velit, vitae dictum justo ornare eleifend. Aliquam erat volutpat. Donec at dolor magna. In ante ipsum, malesuada eget convallis eget, fermentum eu ex. Donec nec sollicitudin ligula. Maecenas non tincidunt orci. Donec cursus turpis ligula, quis iaculis tellus tempus sit amet.</p>
</div>
Here is CSS:
#about-header {
font-size: clamp(2rem, 2vw, 4rem);
text-align: center;
padding: 25px;
color: #47DA44;
font-family: 'Rubik', sans-serif;
}
#about-content {
flex-direction: row-reverse;
background-color: rebeccapurple;
display: flex;
align-items: center;
justify-content: center;
}
#about-text {
font-size: clamp(0.6rem, 2vw, 1.2rem);
margin: 0 25px 0 25px;
color: white;
height: 100%;
}
#pfp {
height: auto;
max-width: 19vw;
width: 19vw;
margin: 0 25px 0 25px;
border-radius: 50%;
}
A flex container taking up the remaining viewport with items/elements within it being centered. Currently is stuck to the top.
.container {
--max-width: 800px;
width: 100%;
max-width: var(--max-width);
margin: auto;
}
#about-header {
font-size: clamp(2rem, 2vw, 4rem);
text-align: center;
padding: 25px;
color: #47DA44;
font-family: 'Rubik', sans-serif;
}
#about-content {
--gap: 1.5rem;
flex-direction: row-reverse;
background-color: rebeccapurple;
display: flex;
align-items: center;
justify-content: space-between;
text-align: justify;
gap: var(--gap);
padding: var(--gap);
}
#about-text {
font-size: clamp(0.6rem, 2vw, 1.2rem);
color: white;
height: 100%;
flex-basis: 70%;
margin: 0px;
}
#pfp {
height: auto;
width: 19vw;
flex-basis: 30%;
/* Style for round shape */
border-radius: 50%;
aspect-ratio: 1 / 1;
object-fit: fill;
}<div class="container">
<h1 id="about-header">// About Me</h1>
<div id="about-content">
<img id="pfp" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRwBvl0TISm6SGlAL6MHm0rxQ0at-j0LQhc9Q&usqp=CAU">
<p id="about-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sollicitudin scelerisque condimentum. Sed porta felis eget libero lacinia interdum. Donec non tellus rutrum, convallis enim sit amet, sollicitudin lacus. Ut cursus elit metus, non suscipit
nunc interdum vitae. Aliquam efficitur urna non sem lobortis ullamcorper. Fusce venenatis rutrum quam at posuere. Aenean dui dui, laoreet ac eros eu, cursus tempus lectus. Nullam condimentum nisi non tortor placerat scelerisque. Pellentesque at
lectus erat. Donec elit metus, egestas in diam sit amet, mollis posuere diam. Maecenas fringilla finibus purus sed elementum. Nullam neque dui, venenatis sed imperdiet et, cursus sit amet velit. Morbi vulputate cursus vehicula. Suspendisse egestas
aliquam sapien, vel finibus massa pharetra in. Donec placerat risus in massa luctus eleifend. Vivamus dignissim lorem eros, vel feugiat arcu faucibus at. <br><br> Phasellus et rutrum ipsum. Sed fermentum eu dolor a semper. Proin vulputate, leo id
ultricies scelerisque, felis libero sagittis enim, fringilla iaculis augue neque sed dui. Pellentesque in libero viverra, rhoncus diam et, tincidunt velit. Ut pulvinar dapibus nisi non interdum. Cras feugiat efficitur metus dapibus hendrerit. Phasellus
id mauris tincidunt dolor placerat eleifend ut eget lectus. Sed euismod nisl odio, eu placerat elit dignissim sed. Quisque dui dolor, luctus eget posuere in, ultrices eget lectus. Sed interdum lorem arcu, nec dapibus massa imperdiet vel. Integer
molestie est diam, ac mattis tortor venenatis nec. Donec vitae tellus magna. Vestibulum maximus bibendum dui ut blandit. Maecenas placerat est enim, nec vestibulum augue vestibulum id. Proin nec viverra sapien, sit amet vestibulum libero. Sed aliquet
ante vitae pellentesque elementum. <br><br> In feugiat ipsum quis felis vulputate sodales. Fusce eleifend, ex ac viverra vehicula, justo sem rutrum diam, ut interdum lorem ipsum sed mauris. Phasellus pretium vestibulum arcu eget volutpat. Curabitur
justo tortor, posuere vel aliquam eu, tempor quis nisi. Maecenas mauris nulla, dignissim ut erat sagittis, imperdiet bibendum erat. Curabitur vitae sem tortor. Aliquam ac interdum massa. In iaculis volutpat dolor et aliquam. Phasellus volutpat justo
id lacus laoreet, at vehicula orci interdum. Nam consectetur faucibus ornare. Fusce rutrum blandit sem malesuada blandit. Maecenas lacinia egestas tellus iaculis vehicula. Mauris dui nulla, suscipit vel interdum a, hendrerit semper dui. <br><br> Nam vitae risus a lectus sagittis suscipit in et nulla. In cursus placerat egestas. In hac habitasse platea dictumst. Aenean tempor efficitur risus non elementum. Ut fermentum semper posuere. Curabitur porttitor nisl felis, non varius purus posuere
sed. In hac habitasse platea dictumst. Pellentesque posuere turpis sollicitudin velit iaculis condimentum. Curabitur sed blandit urna, quis maximus elit. <br><br> Vivamus molestie, eros vel cursus efficitur, turpis dolor tristique ipsum, elementum
posuere magna odio nec velit. Fusce placerat molestie velit, vitae dictum justo ornare eleifend. Aliquam erat volutpat. Donec at dolor magna. In ante ipsum, malesuada eget convallis eget, fermentum eu ex. Donec nec sollicitudin ligula. Maecenas
non tincidunt orci. Donec cursus turpis ligula, quis iaculis tellus tempus sit amet.</p>
</div>
</div>