CSS让2个div并排浮动的问题

我想要2个div,它们在一个容器div中,并排出现.然而,第二个由于某种原因包装.第二个div促销位于第一个div幻灯片放映的右下方.边际似乎是正确的,但我希望这两个div并排出现.

我在这里尝试了一些建议,但它们不起作用.

这是CSS：

#top-feature {
BACkground: red;
height: 320px;
width: 897px;
margin: 11px 0 0 0;
/*padding: 10px 0 0 10px;*/
position: relative;
text-align: left;
}

#slideshow {
height: 300px;
width: 548px;
margin: 0 0 0 0;
BACkground: blue;
}

#promo {
height: 100px;
width: 200px;
margin: 0 0 0 569px;
BACkground: green;
}

这是HTML：

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <div id="top-feature">
        <div id="slideshow">
        </div>
        <div id="promo">
        </div>
    </div>
</asp:Content>