How to align aside as sidebar?
<p>I am working on a page for employees biography with one picture. The biography (content) to display on the left and photo of the employee on the right as sidebar. The page also have footer with full width.</p>

<p>I used CSS to layout the page, and <code>float:left</code> both content and photos and set the width divided accordingly, but the photo (aside) does not display on the right and it appear under the content, however I used <code>display:inline</code> properties for both content and aside. I am trying to display the <code>aside</code> on the right side of the <code>article</code>.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>article, h1, aside, footer {
  padding: 20px;
}

h1 {
  width: 100%;
  background-color: gray;
}

article {
  width: 60%
  float: left;
  display: inline;
}

aside {
  width: 40%;
  float: left;
  display: inline;
}

footer {
  width: 100%;
  background-color: gray;
  clear: both;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
  &lt;article&gt;
    &lt;h1&gt;Biography&lt;/h1&gt;
    &lt;p&gt;General Information goes here&lt;/p&gt;
    &lt;p&gt;Rest of information goes here&lt;/p&gt;
  &lt;/article&gt;
  &lt;aside&gt;
    &lt;h2&gt;Employee Photo&lt;/h2&gt;
    &lt;img src="http://placehold.it/350x150" /&gt;
  &lt;/aside&gt;
  &lt;footer&gt;
    &lt;p&gt;Copyright goes here&lt;/p&gt;
  &lt;/footer&gt;
&lt;/body&gt;</code></pre>
</div>
</div>
</p>