div布局时 margin-left 和max-width产生的问题

整个网页分成左右两个表格，左边width20%，max-width:300px,float:left.右边width:80%,margin-left:20%.float:left.当整个网页宽度值为 y 时（y×20%>300），这时：左边表格的宽度为300px，右边表格margin-left值大于300。左右表格就产生了距离。怎么消除这个距离

---

如果是希望达到这样的效果：左侧有最大宽度限制，右侧自适应页面剩余宽度。

把右侧的float:left 去掉，让左侧浮于右侧上面。

.a{
    width: 20%;
    max-width: 300px;
    background-color: #344444;
    float:left;
}
.b{
    margin-left: 20%;
    width: 80%;
    background-color: #885864;
}

<div class="a">
    a
</div>
<div class="b">
    b
</div>