Howdy! As stated in the title, I’m quite new to coding and I’ve almost completed my first FCC project. But, I’ve ran into a snag regarding the alignment of a CSS flexbox I’m trying to setup with 3 titles and 3 containers of text. While I was able to get the first title and box into a proper position, the other two have proven rather difficult for me! I ended up tinkering with the positioning values which makes it look okay at 100% zoom but that’s not what I’d like and it’s certainly not a good habit to form!
Also please excuse any spaghetti code! (Or, feel free to provide extra tips! I’m eager to learn.)
The project’s Codepen can be found here: https://codepen.io/senuvox/pen/gOgrVbx
HTML Portion:
<!-- Flexbox -->
<div id="tribute-info" class="flex-container dosisfont">
<div id=profilecombo>
<h2 id=profiletitle> Profile </h2>
<ul id=profilebox>
<li> <strong> Date of Birth: </strong> 1980 </li>
<li> <strong> Age: </strong> 31 </li>
<li> <strong> Gender: </strong> Male </li>
<li> <strong> Nationality: </strong> Japanese </li>
<li> <strong> Hair Color: </strong> Black </li>
<li> <strong> Eye Color: </strong> Black </li>
<li> <strong> Build: </strong> Medium </li>
<li> <strong> Occupation: </strong> Plant Appraiser/Horticulturalist </li>
<li> <strong> Namesake: </strong> <a href="https://www.youtube.com/watch?v=DuFW9v8Wv5Y" target=_blank> When Mermaids Cry</a>, by Eagle-Eye Cherry </li>
<li class=boxend> <strong> Stand Namesake: </strong> <a href="https://youtu.be/lHqZ87xld2Q" target=_blank> Doggystyle </a>, by Snoop Dogg (album)
</div>
<div id=summary-abilities> <h2> Summary </h2>
<div id=summarybox>
<p> Lorem ipsum...</p>
</div>
</div>
<div id=summary-abilities > <h2> Abilities </h2> </div>
<div id=abilitiesbox class=fillertext>
<p> Lorem ipsum...</p>
</div>
</div>
CSS Portion:
display: flex;
justify-content: center;
align-items: center;
}
#summary-abilities {
display: flex;
padding-right: 10em;
}
#abilitiestitle {
display: flex;
}
#profilebox {
position:relative;
border: 0.7em double black;
padding-top: 0.5em;
padding-right: 0.5em;
padding-left: 1.5em;
padding-bottom: 0.5em;
height: 12.5em;
width: 21em;
}
#summarybox {
position:absolute;
border: 0.7em double black;
padding-top: 0.5em;
padding-right: 0.5em;
padding-left: 1.5em;
padding-bottom: 0.5em;
height: 12.5em;
width: 21em;
}
#abilitiesbox {
display: flex;
position:absolute;
border: 0.7em double black;
padding-top: 0.5em;
padding-right: 0.5em;
padding-left: 1.5em;
padding-bottom: 0.5em;
height: 12.5em;
width: 21em;
}
.flex-container {
display: flex;
flex-direction: row;
justify-content: center;
justify-content: space-evenly;
}