Alignment issue with child div inside the parent div - html

Question

I have div(class name:xyz)to insert small 4 divs (class name:ax )in it.
I need to insert the first two divs vertically, the third one should come next to first one horizontally and the fourth one should come next to the third vertically.
But all the children are appearing vertically in side the parent.
.xyz {
max-height: 450px;
max-width: 500px;
}
.ax {
height: 200px;
width: 200px;
margin: 0 50px 25px 0;
background-color: #C0C0C0;
}
<div class="xyz">
<div class="ax"> </div>
<div class="ax"> </div>
<div class="ax"> </div>
<div class="ax"> </div>
</div>

Answer 1

You can use CSS3 Multiple column layout which in your case will be column-count: 2;, this property works in following browsers.
.xyz {
max-height: 450px;
max-width: 500px;
column-count: 2;
-webkit-column-count: 2;
}
.ax {
height: 200px;
width: 200px;
margin: 0 50px 25px 0;
background-color: #C0C0C0;
display:inline-block;
}
<div class="xyz">
<div class="ax">1</div>
<div class="ax">2</div>
<div class="ax">3</div>
<div class="ax">4</div>
</div>

Answer 2

.xyz {
max-height: 450px;
max-width: 500px;
}
.ax {
height: 200px;
width: 200px;
margin: 0 50px 25px 0;
background-color: #C0C0C0;
float: left;
}
<div class="xyz">
<div class="ax"> </div>
<div class="ax"> </div>
<div class="ax"> </div>
<div class="ax"> </div>
</div>

Answer 3

Like this?
.xyz {
max-height: 450px;
max-width: 500px;
}
.ax {
height: 200px;
width: 200px;
margin: 0 50px 25px 0;
background-color: #C0C0C0;
float:left;
}
<div class="xyz">
<div class="ax"> </div>
<div class="ax"> </div>
<div style="clear:both"></div>
<div class="ax"> </div>
<div class="ax"> </div>
</div>

Answer 4

I think you are looking for this one , try with snippet
.xyz {
max-height: 450px;
max-width: 500px;
margin-right: -25px; /* newly added */
margin-left: -25px; /* newly added */
}
.ax {
height: 200px;
width: 200px;
margin: 0 25px 25px 25px;
background-color: #C0C0C0;
float:left; /* newly added */
}
<div class="xyz">
<div class="ax">1 </div>
<div class="ax">2 </div>
<div class="ax">3 </div>
<div class="ax">4 </div>
</div>