layout using float vs table

for 2 column dynamic

by techsin

HTML

<div class="cont">
    <div class="a"></div>
    <div class="b">asdfsdf</div>
</div>
<div class="ttt">
    <div class="left"></div>
    <div class="right">asdfsdf</div>
</div>

CSS

.cont {
    margin: 10px;
    width: 500px;
    border:1px solid;
    padding: 5px;
}
.a, .b {
    min-height: 300px;
}
.a {
    background-color: green;
    min-width: 26%;
    float: left;
}
.b {
    background-color: gold;
    padding: 10px;
    box-sizing: border-box;
    margin-left: 26%;
}


.ttt {
    margin: 10px;
    width: 500px;
    border:1px solid;
    padding: 5px;
    display:table;
    height:300px;
}
.left, .right {
    height:100%;
    display:table-cell;
}
.left {
    background:green;
    width: 26%;
}
.right {
    background-color: gold;
    padding: 10px;
}