* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { font-family: sans-serif; } .container { background: #EEE; width: 180px; margin-bottom: 20px; position: relative; } .container:after { content: ''; display: block; clear: both; } .item { width: 60px; height: 30px; float: left; border: 1px solid; background: #3BF; } .item.w2 { width: 120px; } .item.w3 { width: 180px; } .item.h2 { height: 50px; } .item.h3 { height: 70px; } .item.h4 { height: 90px; } .item.h5 { height: 110px; } .stamp { background: red; opacity: 0.75; position: absolute; border: 1px solid; } /* ---- stamp ---- */ .has-stamp .item { width: 45px; } /* stout, in the middle */ .has-stamp .stamp1 { width: 40px; height: 30px; } /* really wide */ .has-stamp .stamp2 { width: 200px; height: 20px; }