Move a div in HTML

January 26, 2022

I am a beginner of HTML and i want to know how to move a div to the right of another div here is the code i currently have:

.tile {
  background: rgb(80, 80, 80);
  width: 300px;
  height: 300px;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: auto;
}

.tile img {
  width: 50px;
}

a {
  color: #fff;
  text-decoration: none;
  padding: 50% 0;
}

<a href="https://classroom.google.com/u/0/h" target="blank_">
        <div class="tile">
            <img src="icons/classes.png" alt="Classroom Image">
      <p>Google Classroom</p>
    </div></a><br>
  <a href="https://wakeid2.wcpss.net/ui/applications" target="blank_">
        <div class="tile">
            <img src="icons/portal.png" alt="WakeID Portal Image">
      <p>WakeID Portal</p>
    </div></a><br>

>Solution :

If you want two boxes side by side then remove the br then wrap with a div and make it as flex.

Updated code :

.tile {
    background: rgb(80, 80, 80);
    width: 300px;
    height: 300px;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: auto;

}

.tile img {
    width: 50px;
}

a {
    color: #fff;
    text-decoration: none;
}

.container {
    display: flex;
}

    <div class="container">
        <a href="https://classroom.google.com/u/0/h" target="blank_">
            <div class="tile">
                <img src="icons/classes.png" alt="Classroom Image">
                <p>Google Classroom</p>
            </div>
        </a>
        <a href="https://wakeid2.wcpss.net/ui/applications" target="blank_">
            <div class="tile">
                <img src="icons/portal.png" alt="WakeID Portal Image">
                <p>WakeID Portal</p>
            </div>
        </a><br>
    </div>