Search code examples
csshtmlalignment

css div within div square alignment issue

I am trying to create a square of 6 * 6 input box in a html page. In order to position them, I use divs and css:

<div class="boxes">
    <div class="box_0_0"><input... ></div>
    <div class="box_0_1"><input... ></div>
    <div class="box_0_2"><input... ></div>
    <div class="box_0_3"><input... ></div>
    ...
    <div class="box_1_0"><input... ></div>
    <div class="box_1_1"><input... ></div>
    ...
</div>

where

.boxes { position: relative; }

.box_0_0 { position: relative; float: left; top: 0px; left: 0px; width: 40px; height: 50px; }
.box_0_1 { position: relative; float: left; top: 0px; left: 50px; width: 40px; height: 50px; }
...

.box_1_0 { position: relative; float: left; top: 60px; left: 0px; width: 40px; height: 50px; }
.box_1_1 { position: relative; float: left; top: 60px; left: 50px; width: 40px; height: 50px; }

but the result is not a square alignment:

enter image description here

How can I achieve this?

Solution

  • Take out float: left and use position: absolute instead of position: relative on box_0_0 and the rest. Does that work?