html,body { padding:0; margin:0; height:100%; } body { width:100%; } .row { width:100%; height:50%; } .row div { width:33%; height:100%; float:left; } button.calcbutton { display: inline-block; position: relative; padding: 0; line-height: normal; cursor: pointer; vertical-align: middle; text-align: center; font-size:180%; overflow: visible; /* removes extra width in IE */ width:24%; height:24%; } button.calcbutton2 { display: inline-block; position: relative; padding: 0; line-height: normal; cursor: pointer; vertical-align: middle; text-align: center; font-size:120%; overflow: visible; /* removes extra width in IE */ width:24%; height:24%; } button.actionbutton { display: inline-block; position: relative; padding: 0; line-height: normal; cursor: pointer; vertical-align: middle; text-align: center; font-size:100%; overflow: visible; /* removes extra width in IE */ width:32%; height:32%; } div.wrapper{ float:left; /* important */ position:relative; /* important(so we can absolutely position the description div */ width:21.5%; height:23%; margin:1%; border: 0.1em solid; box-shadow: 3px 3px 2px #888; text-align: center; } div.wrapper2{ float:left; /* important */ position:relative; /* important(so we can absolutely position the description div */ width:10.2%; height:23%; margin-top:0.5%; margin-bottom:0.5%; margin-left:0.5%; margin-right:0.5%; border: 0.1em solid; box-shadow: 3px 3px 2px #888; text-align: center; } div.description{ position:absolute; /* absolute position (so we can position it where we want)*/ bottom:0px; /* position will be on bottom */ left:0px; width:100%; /* styling bellow */ background-color:black; font-family: 'tahoma'; font-size:100%; color:white; opacity:0.8; /* transparency */ filter:alpha(opacity=80); /* IE transparency */ text-align:center; } @media only screen and (max-aspect-ratio: 6/4) { div.description{ min-height:20%; } } p.description_content{ padding:10px; margin:0px; }