Pyramid

CSS Pyramid

HTML

<div class="wrapper">

<div id="box1">Box 1</div>
<div id="box1">Box 1</div>
<div id="box1">Box 1</div>
<div id="box1">Box 1</div>
<div id="box1">Box 1</div>
<div id="box1">Box 1</div>

<br clear="all">


<div id="box2">Box 2</div>
<div id="box2">Box 2</div>
<div id="box2">Box 2</div>
<div id="box2">Box 2</div>
<div id="box2">Box 2</div>


<br clear="all">

<div id="box3">Box 3</div>
<div id="box3">Box 3</div>
<div id="box3">Box 3</div>
<div id="box3">Box 3</div>

<br clear="all">

<div id="box4">Box 4</div>
<div id="box4">Box 4</div>
<div id="box4">Box 4</div>

<br clear="all">

<div id="box5">Box 5</div>
<div id="box5">Box 5</div>

<br clear="all">
<div id="box6">Box 6</div>
</div>

CSS

.wrapper {
text-align: center;
}

#box1 {
display: inline-block;
width: 80px;
height: 40px;
border: 1px solid #ddd;
font-name: arial;
padding:3% 0% 0% 0%;
}

#box2 {
display: inline-block;
width: 80px;
height: 40px;
border: 1px solid #ddd;
font-name: arial;
padding:3% 0% 0% 0%;
}

#box3 {
display: inline-block;
width: 80px;
height: 40px;
border: 1px solid #ddd;
font-name: arial;
padding:3% 0% 0% 0%;
}

#box4 {
display: inline-block;
width: 80px;
height: 40px;
border: 1px solid #ddd;
font-name: arial;
padding:3% 0% 0% 0%;
}

#box5 {
display: inline-block;
width: 80px;
height: 40px;
border: 1px solid #ddd;
font-name: arial;
padding:3% 0% 0% 0%;
}

#box6 {
display: inline-block;
width: 80px;
height: 40px;
border: 1px solid #ddd;
font-name: arial;
padding:3% 0% 0% 0%;
}