body { margin: 0; overflow: hidden; font-family: sans-serif; font-size: 14px; } * { box-sizing: border-box; } /* Preview sizing */ .middle img { width: 100%; height: 100%; object-fit: contain } /* Create columns that float next to each other */ .column { padding: 10px; height: 100%; } .left, .right { background-color: #f4f4f4; overflow-y: scroll; } .left{ width: 220px; float: left; } .Right{ width: 280px; float: right; } .middle { margin-left: 220px; margin-right: 280px; background-color: #d3d3d3; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } /* Flexboxes */ .flexbox { display: flex; margin-bottom: 5px; } .flexgrow { flex-grow: 1; } /* Data divs */ #captures { font-size:12px; margin-top: 20px; } .capture { height: 75px; width: 260px; margin-bottom: 5px; background-color: #d3d3d3; display: flex; } .capture-thumb { width: 80px; height: 75px; } .capture-heading { font-weight: bold; margin: 5px 0 5px 0; display: inline-block; } .capture-actions { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: 5px; } .capture img { width: 100%; height: 100%; object-fit: cover; } .capture-button { width: 75px; margin-bottom: 3px; height: 22px; }