Question:
I want my div to align left but without disrupting any other elements
When I align the achievementContanier (the box with the stars and cycles) it adds extra padding/margin above the cycle which is meant to be at the top. I want the achievement container to be in the same spot but the other elements look like this
(AC is the achievement container)
Repl link:
https://replit.com/@JohnnySuriano/Cycle-Clicker#index.html
HTML
<body>
<div class="sectionLeft">
<div id='achievementContanier'></div>
<center>
<div class="scoreContanier">
<span id='score'>0</span> Cycles<br><span id='scorepersecond'>0</span> Cycles per Second
</div>
<br>
<div class="clickerContanier">
<img src="images/cycle.png" height="256px" width="256px" id='clicker'>
</div>
</center>
</div>
<div class="sectionRight">
<div id='upgradeContanier'>
</div>
<div id='shopContanier'></div>
<div id='achievementContanier'></div>
</div>
</body>
CSS
.sectionLeft {
float: left;
width: 80%;
}
.sectionRight {
float: right;
width: 20%
}
#achievementContanier img {
height: 64px;
width: 64px;
}
#achievementContanier {
max-width: 300px;
}
Thanks