CSS - How to arrange 9 boxes in 3 columns of 3? - css

Question

I don't understand why I can't get these boxes to align horizontally. The second and third columns are beginning underneath the previous column. Can they be arranged horizontally without resorting to moving the columns with position: relative; bottom: 150px; type positioning or margins?
Here's the JSFiddle: https://jsfiddle.net/625nrqj7/
The HTML:
<div class="wrapper">
<div class="left-middle-blocks">
<div class="submenu-block-1"></div>
<div class="submenu-block-2"></div>
<div class="submenu-block-3"></div>
<div class="submenu-block-4"></div>
<div class="submenu-block-5"></div>
<div class="submenu-block-6"></div>
</div>
<div class="submenu-image-top"></div>
<div class="submenu-image-bottom"></div>
</div>
The CSS:
.submenu-image-top,.submenu-image-bottom,.submenu-block-1,.submenu-block- 2,.submenu-block-3,.submenu-block-4,.submenu-block-5,.submenu-block-6 {
width: 50px;
height: 50px;
}
.submenu-block-1,.submenu-block-2,.submenu-block-3 {
float: left;
clear: left;
background: red;
}
.submenu-block-4,.submenu-block-5,.submenu-block-6 {
float: right;
clear: right;
background: yellow;
}
.submenu-image-top,.submenu-image-bottom {
float: right;
clear: right;
background: blue;
}
.wrapper {
width: 250px;
}
.left-middle-blocks {
width: 150px;
}

Answer 1

Your question is very vague, but if I understand correctly you can achieve what you want by wrapping each three blocks in a different wrapper and setting:
.wrapper {
display: inline-block;
}
jsFiddle: → here.
Snippet:
.wrapper {
display: inline-block;
margin: 0 25px; /* To separate them */
}
.block {
width: 50px;
height: 50px;
border: 1px solid green; /* To make each square visible */
}
#block-1, #block-2, #block-3 {
background: red;
}
#block-4, #block-5, #block-6 {
background: yellow;
}
#block-7, #block-8, #block-9 {
background: blue;
}
<div class="wrapper">
<div id="block-1" class="block"></div>
<div id="block-2" class="block"></div>
<div id="block-3" class="block"></div>
</div>
<div class="wrapper">
<div id="block-4" class="block"></div>
<div id="block-5" class="block"></div>
<div id="block-6" class="block"></div>
</div>
<div class="wrapper">
<div id="block-7" class="block"></div>
<div id="block-8" class="block"></div>
<div id="block-9" class="block"></div>
</div>
If you want the boxes to stay inline use:
.block {
display: inline-block;
}
Snippet:
.wrapper, .block {
display: inline-block;
}
.wrapper {
margin: 0 15px;
/* To separate them */
}
.block {
width: 50px;
height: 50px;
border: 1px solid green;
/* To make each square visible */
}
#block-1, #block-2, #block-3 {
background: red;
}
#block-4, #block-5, #block-6 {
background: yellow;
}
#block-7, #block-8, #block-9 {
background: blue;
}
<div class="wrapper">
<div id="block-1" class="block"></div>
<div id="block-2" class="block"></div>
<div id="block-3" class="block"></div>
</div>
<div class="wrapper">
<div id="block-4" class="block"></div>
<div id="block-5" class="block"></div>
<div id="block-6" class="block"></div>
</div>
<div class="wrapper">
<div id="block-7" class="block"></div>
<div id="block-8" class="block"></div>
<div id="block-9" class="block"></div>
</div>