Facing issue with display:flex, should I use float instead - html

Question

I'm working on a small dream project. Dream is to enable play chess online. As part one of this project I want to have a client-side chessboard widget that is firstly accessible for blind. I'm not good at css at all and need some help.
I've written javascript to generate 3 things
An unordered list with labels for rows (or ranks as one would call it in chess terms).
A board which I want adjacent to the list of rank labels.
An unordered list of column labels (or files as one would call it in chess terms). I would like have this arranged horizontally underneath the chessboard.
I have managed to generate markup using javascript and got it to show up on the page. Additionally, I have keyboard events attached to the board which allow me to navigate the board announcing the rank label and file label for a square.
Here is what gets rendered on the page:
<div id="main">
<div class="boardWrapper">
<div class="upperSection">
<ul class="rankLabels leftLabelSpace" id="rank">
<li id="rank_0">8</li>
<li id="rank_1">7</li>
<li id="rank_2">6</li>
...
<li id="rank_7">1</li>
</ul>
<table role="grid" class="board rightBoardSpace" id="chessBoard">
<!--8x8 gridcells here-->
</table>
</div>
<div class="lowerSection">
<div class="leftLabelSpace"><!--empty div--></div>
<ul id="file" class="fileLabels rightBoardSpace">
<li id="file_0">a</li>
<li id="file_1">b</li>
<li id="file_2">c</li>
...
<li id="file_7">h</li>
</ul>
</div>
</div>
</div>
Here is the css I'm playing around with. Somehow I can't get the UI rendered as shown in this image of chess board.
#main {
width: 100%;
height: auto;
}
.boardWrapper {
margin-left: auto;
margin-right: auto;
width: 560px;
height: 560px;
display: flex;
}
.upperSection {
flex: 1;
display: flex;
width: 100%;
}
.lowerSection {
clear: left;
display: flex;
width: 100%;
height: 5em;
}
.leftLabelSpace {
width: 5em;
height: 100%;
}
.rankLabels {
list-style-type: none;
}
.rankLabels li {
text-align: center;
vertical-align: middle;
font-weight: bold;
height: 12.5%;
}
.fileLabels {
list-style-type: none;
flex: 1;
}
.fileLabels li {
float: left;
text-align: center;
vertical-align: middle;
font-weight: bold;
width: 12.5%;
}
.board {
table-layout: fixed;
border: 1px solid black;
border-collapse: collapse;
border-spacing: 0px;
height: 100%;
width: 100%;
}
Can someone help me understand how floats and flex work? I'm bad at css. If anyone is interested, they can contribute a solution on axchessible github repository.
Thanks in advance!

Answer 1

You can create this with only a table. You don't need to use lists.
jsfiddle: https://jsfiddle.net/2dkjcoqp/
#main {
width: 100%;
height: auto;
}
.boardWrapper {
margin-left: auto;
margin-right: auto;
width: 560px;
height: 560px;
}
.board {
table-layout: fixed;
border: none;
border-collapse: collapse;
border-spacing: 0px;
height: 100%;
width: 100%;
}
table.board tr td {
border: 1px solid black;
}
table.board tr:nth-of-type(odd) td:nth-of-type(odd),
table.board tr:nth-of-type(even) td:nth-of-type(even) {
background-color: white;
}
table.board tr:nth-of-type(even) td:nth-of-type(odd),
table.board tr:nth-of-type(odd) td:nth-of-type(even) {
background-color: black;
}
<div id="main">
<div class="boardWrapper">
<table role="grid" class="board" id="chessBoard">
<tr>
<th id="rank_0">8</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th id="rank_1">7</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th id="rank_2">6</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th id="rank_3">5</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th id="rank_4">4</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th id="rank_5">3</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th id="rank_6">2</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th id="rank_7">1</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th></th>
<th id="file_0">a</th>
<th id="file_1">b</th>
<th id="file_2">c</th>
<th id="file_3">d</th>
<th id="file_4">e</th>
<th id="file_5">f</th>
<th id="file_6">g</th>
<th id="file_7">h</th>
</tr>
</table>
</div>
</div>