如何使用CSS将两个截面元素放在一起？

Question

我正在尝试使用HTML5和CSS实现以下HTML结构。 section元素必须彼此相邻。右section元素必须具有30像素的margin-left和220像素的固定width。

到目前为止我所拥有的内容如下：

HTML

<section id="section-left">My left section</section>
<section id="section-right">My right section</section>

CSS

#section-left {
   float: left;
}

#section-right {
   float: right;
   width: 220px;
   margin-left: 30px
}

我的问题是左侧section未填充右侧section元素的剩余空间。我的结果如下：

这里有什么问题？

Answer 1

颠倒部分的顺序并使用此CSS：

#section-left {
    overflow:hidden;
}
#section-right {
    width:220px;
    margin-left:30px;
    float:right;
}

<强> jsFiddle example