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

Question

我正在尝试使用HTML5和CSS实现以下HTML结构.所述section元件必须是彼此相邻.右边section元素必须具有margin-left30像素和width220像素的固定值.

在此输入图像描述

我到目前为止的内容如下:

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;
}