Переместить в сторону рядом с разделом HTML5

Question

Я пытаюсь заставить тег Aside плавать рядом с тегом Section с помощью CSS, но пока мне не везет.

Ниже 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 к обоим элементам.

Не забудьте также очистить ваши поплавки.

Answer 2

Я должен изменить порядок тегов и дать им display: inline-block;

Другие ответы о плавать я не должен использовать. Большинство дизайнеров неправильно понимают 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;
}

Пример @ jsfiddle

Answer 3

Вам просто нужно добавить float: left; на ваш <aside> раздел.

Answer 4

Необходимо обернуть элементы...

CSS

#WholePage {
  width: 100%;
  border: 1px dotted red;
  padding: 10px;
}
section {
  display: inline-block;
  width: 70%;
  height: 300px;
  border: 1px dashed green;
}
aside {
  display: inline-block;
  width: 25%;
  height: 400px;
  border: 1px dashed blue;
}

пример @ скрипка

Answer 5

Добавлять float: left на ваш aside а также section,