0

I am trying to create 3 div boxes that are next to each other with some spacing in between them and get moved based on the size of the screen

So far I have the following code:

body {
  min-height: 450px;
  height: 100vh;
  margin: 0;
  background: radial-gradient(ellipse farthest-corner at center top, #f39264 0%, #f2606f 100%);
  color: #fff;
  font-family: 'Open Sans', sans-serif;
}

.leaderboard {
  position: relative;
  top: 50%;
  left: 33%;
  right: 33%;
  float: left;
  margin: 1%;
  transform: translate(-50%, -50%);
  width: 285px;
  height: 308px;
  background: linear-gradient(to bottom, #3a404d, #181c26);
  border-radius: 10px;
  box-shadow: 0 7px 30px rgba(62, 9, 11, 0.3);
}
<div class="leaderboard">
</div>
<div class="leaderboard">
</div>
<div class="leaderboard">
</div>

I am having the following problem - when I try to shrink the page sideways the space between the right-most div and the right side of the page shrinks faster than the space between the left-most div and the left side of the page.

I am trying to make the space between the side divs and the sides of the page symmetrical.

This is how it looks so far

Asons
  • 84,923
  • 12
  • 110
  • 165
Jon Doe
  • 379
  • 1
  • 3
  • 14
  • Of course it has to. The elements has a left value and being floated from left. I guess you thought the right value of 33% would come into play here, though not in the way you think. For right floated element it would be the opposite. – Asons Apr 22 '19 at 16:55
  • The dupe link has several solutions, and the Flexbox version is likely the best: https://stackoverflow.com/a/16144913/2827823 – Asons Apr 22 '19 at 17:00

1 Answers1

0

You could put them in a container, something like this:

<div class="container">
<div class="leaderboard">
</div>
<div class="leaderboard">
</div>
<div class="leaderboard">
</div>
</div>


.container{
  text-align:center;
  width:100%;
}

https://codepen.io/pythagoras1357/pen/pBZKmW

Claytronicon
  • 1,437
  • 13
  • 14
  • 1
    There is literally 100's of answers how to center elements horizontally, so we don't need more. Instead, for these types of questions, use the built-in "vote/flag to close as duplicate" – Asons Apr 22 '19 at 17:04