在节HTML5旁边浮动

Question

我正在尝试让一个侧边标记浮动在CSS的Section标记旁边，但到目前为止还没有太多的运气。

下面是HTML

<div id="WholePage">
<section> 
    <asp:ContentPlaceHolder ID="MainContentWindow" runat="server">                 </asp:ContentPlaceHolder>
</section>

<aside>
    <div id="SideAdRotator">
    <asp:AdRotator ID="AsideAdRotator" runat="server" AdvertisementFile="Adverts.xml"         Height="300px" Width="150px"/>
    </div>
</aside>

​

下面是目前为止的CSS

section
{
    display : block;
    width : 48em;
    height : 40em;
    border-width : 0.1em;
    border-style : dashed;
    border-color : black;
}

aside
{
    display : block;
    width : 12em;
    height : 40em;
    border-width : 0.1em;
    border-style : dashed;
    border-color : black;
}

任何关于如何做到这一点的建议或建议都将不胜感激。这是我第一次遇到这种浮动节的问题，我真的很难理解为什么是现在。

非常感谢所有的回复，它们都很有用，解决了我的问题。

Answer 1

将float:left添加到这两个元素。

也不要忘了使用clear your floats。

Answer 2

我应该更改标记的顺序，并为它们提供display: inline-block;

关于float的其他答案我不应该使用。大多数设计师误解了float。

When use float?

Html

<div id="WholePage">
    <aside></aside>
    <section></section>
</div>

CSS

section
{
    display : inline-block;
    width : 48em;
    height : 40em;
    border-width : 0.1em;
    border-style : dashed;
    border-color : black;
}

aside
{
    display : inline-block;
    width : 12em;
    height : 40em;
    border-width : 0.1em;
    border-style : dashed;
    border-color : black;
}

Example @ jsfiddle

Answer 3

将float: left添加到您的aside和section。