Aligning Div without disrupting other elements

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:


  <div class="sectionLeft">
        <div id='achievementContanier'></div>
      <div class="scoreContanier">
        <span id='score'>0</span> Cycles<br><span id='scorepersecond'>0</span> Cycles per Second
      <div class="clickerContanier">
        <img src="images/cycle.png" height="256px" width="256px" id='clicker'>
  <div class="sectionRight">
    <div id='upgradeContanier'>
    <div id='shopContanier'></div>
    <div id='achievementContanier'></div>


.sectionLeft {
  float: left;
  width: 80%;

.sectionRight {
  float: right;
  width: 20%
#achievementContanier img {
  height: 64px;
  width: 64px;

#achievementContanier {
  max-width: 300px;


You can set its position as absolute, or use some sort of grid layout.


This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.