title: Why does my box not display on the right?
body: <p>This is probably a very easy question, but I never really did web... so I have my troubles with CSS.</p>
  
  <p>I'm trying to style my CV using CSS and HTML5. I have created a little class for my <em>main aside</em>, which I intend to use as the place to put things that are somehow related to the main content, such as new official artworks from our game artists in a page about the new game's gameplay, or links to game characters, etc. </p>
  
  <p>I also wanted to eventually reuse the <code>aside</code> element in other containers, such as the navigation bar, to have a special element on each page that's clearly set apart of other navigation links. </p>
  
  <p>However, while the latter part works, the first fails. I think applying the <code>rightpane</code> class to my <code>aside</code> element resets the position to the left, when I thought it would apply the <em>float: right</em> rule and then position absolutely 20% from the top.</p>
  
  <ul>
  <li>Is my understanding correct?</li>
  <li>If I add a right: 5% rule to the aside element styling, then my box displays somehow where I want, but it's a pre-decided position compared to letting it float on the right, which seems bad?</li>
  </ul>
  
  <p>So what should I do?</p>
  
  <pre><code>aside {
  text-align: right;
  float: right;
  }
  
  .rightpane {
  text-align: right;
  overflow: scroll;
  visibility: visible;
  position: absolute;
  max-width: 20%;
  top: 20%;
  }
  </code></pre>
  
  <p>I use that in a code that looks this way:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt; 
  &lt;link rel="stylesheet" type="text/css" href="../Presentation/CSS/main.css" /&gt;
  &lt;title&gt;
  Minus and Brains, Inc.
  &lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;nav id="navBar" class="center"&gt;
  &lt;ul&gt;
  &lt;li&gt;
  &lt;a href="wtf.html"&gt;WTF&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
  &lt;a href="Cheese.html"&gt;Cheese&lt;/a&gt;
  &lt;/li&gt;
  &lt;aside&gt;
  &lt;li&gt;
  &lt;a href="supertramp.html"&gt;Breakfast in America&lt;/a&gt;
  &lt;/aside&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;article&gt;
  &lt;h2&gt;Plans to conquer the world&lt;/h2&gt;&lt;time datetime=”2011-09-09T19:31:45+01:00″&gt;9 septembre 2011&lt;/time&gt;
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/article&gt;
  &lt;aside class="rightpane"&gt;09/09/2011&lt;br/&gt;Some brilliant news: Brains finally takes over World!&lt;/aside&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>