CSS for DIVs as shadowed curved boxes in a line

CSS for the shadowed box. You don’t need anything beyond this to create a shadowed box. The rest just shows you how to line it all up.

.box {
-webkit-border-radius: 6px 6px 6px 6px;
border-radius: 6px 6px 6px 6px;
-webkit-box-shadow: 3px 3px 3px 3px #ABABAB;
box-shadow: 3px 3px 3px 3px #ABABAB;
resize: both;
overflow: auto;
min-width: 50px; /*suggest a min-width & min-height*/
min-height: 50px;
background-color:#FFFFFF;
text-align: center;
margin: 20px;
}

How to line the boxes up. I am copying this from Jonathan Snook’s page with slight modifications.

#container {
display: table;
border-collapse: separate;
border-spacing: 10px 50px;
}
#row {
display: table-row;
}
#left {
display: table-cell;
padding:20px;
}
#right {
padding:20px;
display: table-cell;
}
#middle {
padding:20px;
display: table-cell;
margin: 60px; /* Not needed. Don't know why I put it here */
}

This is for mobile. If the resolution goes below 797px, the rows go into block mode.
@media all and (max-width:797px) { #row {
display: block;
text-align:center;
}
}