I need help aligning 12 buttons in a specific layout: 4 buttons on the top and 3 on each side to total 12 buttons. Also, I want 2 additional buttons at the top left (Div/Mult) and top right (Add/Sub).
Below, you'll find the HTML and CSS documents. If you require the JS document, please feel free to request it. I have provided the desired layout but I'm unsure how to implement it.
Div/MultBtn Add/SubBtn
1 2 3 4 (extend all the way to the other side)
<!DOCTYPE html>
<html>
<head>
<title>Math Fact Tune Up</title>
<style>
#buttonContainer {
position: relative;
top: 50%;
transform: translateY(-50%);
}
button {
display: block;
margin: 0 auto;
background-color: #262b2b;
border-style: solid;
color: white;
font-family: Open Sans, sans-serif;
border-radius: 5px;
}
.lvlButton {
padding-bottom: .1em;
padding-top: .1em;
}
body,
html {
height: 100%;
overflow: scroll;
overflow-x: hidden;
background-color: #262b2b;
}
body {
overflow: hidden;
}
#go {
background-color: #00d10d
}
</style>
</head>
<body>
<div id="buttonContainer">
<div class="lvlButton" id="divMult">
<button id="divMultBtn">
Multiplication/Division
</button>
</div>
<br>
<div class="lvlButton" id="addSub">
<button id="addSubBtn">
Addition/Subtraction
</button>
</div>
<br>
<div class="lvlButton" id="lvl1">
<button id="lvl1Btn">
Level 1
</button>
</div>
<br>
<div class="lvlButton" id="lvl2">
<button id="lvl2Btn">
Level 2
</button>
</div>
<br>
<div class="lvlButton" id="lvl3">
<button id="lvl3Btn">
Level 3
</button>
</div>
<br>
<div class="lvlButton" id="lvl4">
<button id="lvl4Btn">
Level 4
</button>
</div>
<br>
<div class="lvlButton" id="lvl5">
<button id="lvl5Btn">
Level 5
</button>
</div>
<br>
<div class="lvlButton" id="lvl6">
<button id="lvl6Btn">
Level 6
</button>
</div>
<br>
<div class="lvlButton" id="lvl7">
<button id="lvl7Btn">
Level 7
</button>
</div>
<br>
<div class="lvlButton" id="lvl8">
<button id="lvl8Btn">
Level 8
</button>
</div>
<br>
<div class="lvlButton" id="lvl9">
<button id="lvl9Btn">
Level 9
</button>
</div>
<br>
<div class="lvlButton" id="lvl10">
<button id="lvl10Btn">
Level 10
</button>
</div>
<br>
<div class="lvlButton" id="lvl11">
<button id="lvl11Btn">
Level 11
</button>
</div>
<br>
<div class="lvlButton" id="lvl12">
<button id="lvl12Btn">
Level 12
</button>
</div>
<div class="lvlButton" id="gocontainer">
<button id="go">
GO
</button>
</div>
</div>
</body>
</html>Picture of result