How do I keep a grid-type-arrangement of floating div elements centered in their container at various screen widths?

Question

I'm trying to center a div in a div so I tried all the solution in other questions like:

How do you easily horizontally center a <div> using CSS?

How to horizontally center a <div> in another <div>?

But I cannot get it done well. The persons in the grid should always be centered horizontally.

The page is at: http://www.arlande.nl/managers and it is a Drupal site. It is responsive based on the content of 220px. Depending on the number of persons the complete view should be center. So when there are only 2 persons in the row the complete row should be centered and if there are 3 persons in the row it should also be centered.

Any suggestion which CSS I should apply? Outer box div is view-id-smoelenboek Responsive css is on div view-content-wrapper

Answer 1

Your question does not seem to fit your actual issue. Looking at your description and your web page, I understand your question as follows: "How do I keep a grid-type-arrangement of floating div elements centered in their container at various screen widths?"

Well, here you go. And here is the jsfiddle.

#container {
  width:320px;
  margin:auto;  
  background-color:tan;   
  padding:40px;
  box-sizing:border-box;
}

.circle {
  float:left;
  background-color:blue;
  margin:20px;
  height:200px;
  width:200px;
  border-radius:50%;      
}

.clearFix {
  clear:both;
}

@media(min-width:560px) {
  #container {
    width:560px;
  }
}

@media(min-width:800px) {
  #container {
    width:800px;
  }
}

@media(min-width:1040px) {
  #container {
    width:1040px;
  }
}

<div id="container">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="clearFix"></div>
</div>

This answer is not an exact representation of your code structure (you have some column classes), but you should be able to apply it to your code without too much trouble. The behavior of the "circles" mimics the behavior of the elements you have on your page, but centered. The key here is to use media queries to redefine the width value of the container at various screen widths.