How can you perfectly centre a grid within a container without using CSS Grid or flexbox?

Question

Okay, so I thought that the grid was perfectly aligned to the center, only to realise that it was a few pixels out. I completely stripped all of my attempts at centering and looked online but couldn't find anything.

I know I can use CSS Grids, Flexbox etc. but I am trying to learn how to create websites without using any aid. So I can learn the reasoning behind things.

Fiddle:

https://jsfiddle.net/8L9ye7nj/5/

Grid HTML:

<div class="box-wrapper">
  <div class="box-container">
    <div class="box" id="stethoscope">
      <div class="box-label">
        <p>Book an appointment</p>
      </div>
    </div>

    <div class="box" id="prescription">
      <div class="box-label">
        <p>Request a repeat prescription</p>
      </div>
    </div>

    <div class="box" id="group">
      <div class="box-label">
        <p>Join the Patient Group</p>
      </div>
    </div>
  </div>
</div>

Grid CSS:

.box {
  float: left;
  width: 25%;
  height: 300px;
  background-color: #252625;
  color: #FFF;
  position: relative;
  padding: 15px;
  margin: 0.5%;
}

.box-label {
  position: absolute;
  bottom: 0;
  text-align: center;
  background-color: rgba(0,0,0,0.5);
  width: 100%;
  padding: 7px 0;
  left: 0;
}

.box-label:hover {
  animation: box-stretch 1s forwards ease-in-out;
  cursor: pointer;
}

.box-container {
  width: 90%;
}

.box-container::after {
    content: "";
    clear: both;
    display: table;
}

.box-wrapper {
  background-color:  #B21645;
  padding: 30px;
}

score 0 · Answer 1 · answered Sep 07 '18 at 20:10

How can you divide the box and center them?

You can use calc to use mathematical expressions to calculate height, widths etc in css. You can divide the width by three here for the box.

.box {
  display: inline-block;
  width: calc(100% / 3);
}

Things to consider

Mind the space between inline-block elements. You can read more about that here.
Avoid using floats as much as possible. Most layouts done with float can be achieved with inline-block. Floats are simply meant to take an element, put it to one side, and let other content flow around it. That’s all.
box-wrapper and box-container either one is only needed to wrap the contents inside.

Code Snippet

body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

.box-wrapper {
  background-color: #b21645;
  padding: 20px;
}

.box {
  position: relative;
  display: inline-block;
  width: calc(100% / 3);
  padding: 0 10px;
  height: 300px;
  overflow: hidden;
}

.box img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: left top;
}

.box-label {
  position: absolute;
  bottom: 0;
  width: calc(100% - 20px);
  text-align: center;
  background-color: rgba(0, 0, 0, .6);
  padding: 10px 0;
  transition: padding 0.3s;
}

.box-label:hover {
  padding: 25px 0;
}

.box-label p {
  font-family: Helvetica;
  color: white;
  font-size: 20px;
}

<div class="box-wrapper">
  <div class="box">
    <img src="https://images.unsplash.com/photo-1509027572446-af8401acfdc3?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ef8f839186c5a6055d2802005b575194&auto=format&fit=crop&w=500&q=60" alt="" />
    <div class="box-label">
      <p>Some Title Here</p>
    </div>
  </div><div class="box">
    <img src="https://images.unsplash.com/photo-1509027572446-af8401acfdc3?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ef8f839186c5a6055d2802005b575194&auto=format&fit=crop&w=500&q=60" alt="">
    <div class="box-label">

      <p>Some Title Here</p>
    </div>
  </div><div class="box">
    <img src="https://images.unsplash.com/photo-1509027572446-af8401acfdc3?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ef8f839186c5a6055d2802005b575194&auto=format&fit=crop&w=500&q=60" alt="">
    <div class="box-label">
      <p>Some Title Here</p>
    </div>
  </div>
</div>

Thanks, this was very helpful. The inline-block thing doesn't seem to be working out for me but I'm trying to figure that out. If I wanted to make the boxes not fill up 100% of the screen I would still need an additional wrapper, right? — Kaleshe Alleyne-Vassel, Sep 08 '18 at 16:54

How can you perfectly centre a grid within a container without using CSS Grid or flexbox?

1 Answers1