I'm currently tackling an HTML layout challenge that involves creating a responsive Tic Tac Toe board using only HTML and CSS, without any JavaScript. This is how I have structured the layout of the board:
<div class="board">
<div class="lines">
<div class="line">
<div class="cell">
<div class="cell-content"></div>
</div>
<div class="cell">
<div class="cell-content"></div>
</div>
<div class="cell">
<div class="cell-content"></div>
</div>
</div>
<div class="line">
<div class="cell">
<div class="cell-content"></div>
</div>
<div class="cell">
<div class="cell-content"></div>
</div>
<div class="cell">
<div class="cell-content"></div>
</div>
</div>
<div class="line"></div>
<div class="cell"></div>
<div class="cell-content">&<>/div>
</div>
</div>
</div>
</div>
Here is the corresponding CSS code:
.board {
position: relative;
height: 100%;
width: 100%;
border:1px solid black;
box-sizing:border-box;
}
.board:before {
content:"";
display: block;
padding-top: 100%;
}
.lines {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.line {
width: 100%;
}
.cell {
float: left;
width: 33.3333%;
border:1px solid black;
box-sizing:border-box;
}
.cell:before {
content:"";
display: block;
padding-top: 100%;
}
.cell-content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
In this setup, I haven't specified any sizes besides width: 33.3333%. The height of the board and cells is determined using the Height equals width with pure CSS technique.
Overall, everything looks good. However, there's one issue - sometimes the combined widths/heights of the board cells are less than the overall width/height of the board. This results in a visible gap between the last cell border and the board border. While I can replicate it in Chrome or Firefox, it doesn't seem to occur in Internet Explorer. Is there a way to resolve this?
You can check out a demo on jsFiddle (the red line indicates the gap).
UPDATE: After further examination, I realized that the issue also occurs in IE. Still unsure why I hadn't noticed it earlier.