HTML/CSS to make multicol columns match height

by Ben Clayton

HTML

<script src="//www.infxsolutions.com/script/minified/jquery-ecommerce.js"></script>
<div class="container">
    <div class="column">
        <div style="width:100%;" class="-sys-dbnewpicture centre-object heightset">
            <img src="http://infxsolutions.com/images/spacer.gif" style="width: 100%; height: 130px; background-image: url(http://www.infxsolutions.com/dyn/_pictures/marketing/digital-marketing-experts.png);" class="-sys-dbnewpicture-img heightset" alt="digital marketing experts" title="digital marketing experts" data-aspectratio="0.4167" />
        </div>
    </div>
    <div class="column">
        <select size="4">
            <option>Option 1</option>
            <option>Option 2</option>
            <option>Option 3</option>
            <option>Option 4</option>
        </select>
    </div>
    <div>

CSS

.container {
    display: table;
    width: 100%;
    border: 1px solid black;
}
.-sys-dbnewpicture img {
    width:100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    overflow: hidden;
    display: block;
}
.container .column {
    display: table-cell;
    width: 45%;
    background-color: #AAA;
    padding: 5px;
    border: 5px solid white;
    vertical-align: top;
    height: 90%;
}
select {
    width: 100%;
}
@media only screen and (max-width:400px) {
    .container {
        display:block;
    }
    .container .column {
        display:block;
        width:100%;
    }
}