CSS inline-block board alignment

Question

I am trying to build a Sudoku style board with CSS but am having some trouble getting a few of the squares to align. What am I missing ??

CODEPEN

HTML

<div class="middle-box">
  <div class="sudoku">
    <div class="square">
      <input class="tile normal edge-left edge-top">
      <input class="tile normal edge-top">
      <input class="tile normal edge-top">
      <input class="tile normal edge-left">
      <input class="tile normal">
      <input class="tile normal">
      <input class="tile normal edge-left">
      <input class="tile normal">
      <input class="tile normal">
    </div>

CSS:

html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: #ecf0f1;
background-size: cover;
font-family: "Slabo 27px", serif; }

a {
  text-decoration: none;
  transition: all 0.3s; }

.sudoku {
  width: 460px;
  height: 460px;
  background: #2c3e50;
  border: 20px solid #2c3e50;
  position: absolute;
  left: 0;
  top: 0; }
 ....

you're setting borders in one class, then you're "disabling" them again in another added to the same element, why are you surprised it's not working? get those borders right and all will be aligned... — benomatis, Dec 04 '14 at 07:48
http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements — Salman A, Dec 04 '14 at 07:53

score 1 · Answer 1 · answered Dec 04 '14 at 07:52

1

Since your inputs are inline-block elements, browser also respects white spaces between them, and since they also occupy some space, you get observed result, when inputs don't fit in row anymore.

The simplest fix is to set font-size: 0 on wrapper container, so that whitespaces effectively become 0-width. This will not affect inputs font-size setting:

.sudoku {
  /* ... */
  font-size: 0;
}

Demo: http://codepen.io/anon/pen/xbwBvG

answered Dec 04 '14 at 07:52

dfsq

191,768
25
236
258

Thanks! This is a lot closer. Do you have any solutions for every third row appearing as 1 row as opposed to three tiles? – Ryan Salmons Dec 04 '14 at 08:02

Weafs.py · Answer 2 · 2014-12-04T08:20:09.670

Here is a perfect sudoku board:

codepen

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #ecf0f1;
  background-size: cover;
  font-family: "Slabo 27px", serif;
}
a {
  text-decoration: none;
  transition: all 0.3s;
}
.sudoku {
  width: 463px;
  height: 463px;
  background: #2c3e50;
  border: 20px solid #2c3e50;
  position: absolute;
  left: 0;
  top: 0;
}
.square {
  width: 153px;
  height: 153px;
  display: inline-block;
  vertical-align: top;
  background: #8aa4be;
  margin-right: 1px;
  margin-bottom: 1px;
}
.normal {
  padding: 0;
  border: none;
  outline: none;
  font-family: inherit;
}
.tile {
  width: 50px;
  height: 50px;
  background: #fff;
  border-top: 1px solid #8aa4be;
  border-left: 1px solid #8aa4be;
  font-size: 20px;
  text-align: center;
  color: #ccc;
  line-height: 50px;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.edge-left {
  border-left: 1px solid #2c3e50;
}
.edge-top {
  box-shadow: 0 -1px 0 0px #2c3e50;
  border: none;
  padding-top: 1px;
}
.middle-box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 500px;
  height: 500px;
  margin-top: -250px;
  margin-left: -250px;
}
/*# sourceMappingURL=style.css.map */

<div class="middle-box">
    <div class="sudoku">
      <div class="square">
        <input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal">
      </div
      ><div class="square">
        <input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal">
      </div
      ><div class="square">
        <input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal">
      </div
      ><div class="square">
        <input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal">
      </div
      ><div class="square">
        <input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal">
      </div
      ><div class="square">
        <input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal">
      </div
      ><div class="square">
        <input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal">
      </div
      ><div class="square">
        <input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal">
      </div
      ><div class="square">
        <input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal"
        ><input class="tile normal">
      </div
    </div>
</div>

score 0 · Answer 3 · answered Dec 04 '14 at 07:52

display:inline-block; add spaces . if you want to use display:inline-block; then you have to remove all the spaces else use float:left; for .tile class

.tile {
  width: 50px;
  height: 50px;
  background: #fff;
  border-top: 1px solid #8aa4be;
  border-left: 1px solid #8aa4be;
  display: inline-block;
  font-size: 20px;
  text-align: center;
  color: #ccc;
  line-height: 50px;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
  user-select: none; 
float:left // added}

html

 <input class="tile normal edge-left edge-top"><input class="tile normal edge-top"><input class="tile normal edge-top"><input class="tile normal edge-left"><input class="tile normal"><input class="tile normal"><input class="tile normal edge-left"><input class="tile normal"><input class="tile normal">

score 0 · Answer 4 · answered Dec 04 '14 at 07:53

Borders add margin to elements (space on the outside), so the border being on some of the items and not others are causing them to not align. Rather then using and not using borders, simply change the color of the border to transparent when you don't want it to appear.

score -1 · Answer 5 · answered Dec 04 '14 at 07:55

-1

Check this code

CodePen

.sudoku {
  width: 530px;  //edited
  height: 470px; //edited
. 
.
.
}

.square {
  width: 170px; //edited
  display: inline-block;
  background: #8aa4be; 
  border:1px solid red;
}

answered Dec 04 '14 at 07:55

Rohan Lopes

165
7
18

CSS inline-block board alignment

5 Answers5

Demo: http://codepen.io/anon/pen/xbwBvG

codepen