先看看等分的布局方案
1. float
兼容性较好（IE 8以上）
**2. flex **
兼容性较差（flex属于css3）
兼容性：IE8及以上
3. table
兼容性：可以兼容 IE 8
1. table
利用 table 的特性——每列等宽
2. flex
3. float
伪等高（只有背景显示高度相等），左右真实的高度其实不相等。 兼容性较好。
那就不能用line-height了，因为整个行高的范围都算作a标签的，可以改用其他方法，比如：.box {
......
line-height: 1
......
padding: 19px 10px 0
}
因为你使用了float，所以left和right都已经不在正常的流中了，所以他们之间的以及父元素之间的高度都是互相独立的。所以要想不使用javascript，而又要这两者之间有关系的话就不能使用float。
通常要进行准确的布局都是通过table来解决
参考下，必要的时候给left和right设置宽度
<div id="container" style="display:tablewidth:100%">
<div id="left" style="background-color: reddisplay:table-cell">
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
</div>
<div style="display:table-cell"></div>
<div id="right" style="background-color: bluedisplay:table-cell">内容</div>
</div>
