css 3 column grid applying equal margin - html

Question

.num_pad_wrap {
width:300px;
background:#eee;
height:300px;
}
.num_pad_wrap div {
float: left;
width: 30%;
background: #666C77;
height: 50px;
margin:1%;
border: 1px solid #000;
}
<div class="num_pad_wrap">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>0</div>
<div>C</div>
</div>
I'm trying to do a calculator. As you can see I failed to calculate the margin to fit well in the container. It's easy if I can just hardcode the pixel but in my case I have to do percentage. How to style the margin equally for all sides?

Answer 1

CSS:
.num_pad_wrap {
width: 300px;
background:#eee;
height:300px;
}
.num_pad_wrap .row {
margin-left: 2%;
}
.num_pad_wrap .row div {
float: left;
width: 30%;
background: #666C77;
height: 50px;
margin:1%;
border: 1px solid #000;
}
HTML:
<div class="num_pad_wrap">
<div class="row">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="row">
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<div class="row">
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="row">
<div>0</div>
<div>C</div>
</div>
</div>
Since your 3 buttons take up 96% of the width, (32% * 3), your total margins left is 4%.
You can wrap each row around a row class, then set margin-left to half of your total margin, which is 2% in this case.

Answer 2

You can try like this: Demo
.num_pad_wrap {
overflow: hidden;
width:300px;
background:#eee;
height:auto;
padding:1.2% 1.2% 0% 1.2%;
}
.num_pad_wrap div {
background: #eee;
float: left;
margin-left: 3.2%;
margin-bottom: 3.2%;
background: #666C77;
height: 50px;
width: 31.2%;
margin-bottom: 3.2%;
}
/* clear col */
.num_pad_wrap div:nth-of-type(3n+1) {
margin-left: 0;
clear: left;
}
HTML:
<div class="num_pad_wrap">
<div>1</div>
........
<div>C</div>
</div>