title: Put text aligned to right & left
body: <p>HTML file: </p>
  
  <pre><code>&lt;div id="home"&gt;
  &lt;b&gt;&lt;p class="split-para"&gt;python&lt;br&gt;&lt;a href="pyt_temp.html" class="float"&gt;temperature converter in terminal&lt;/a&gt;  &lt;br&gt;
  &lt;a href="pyt_palindrom.html" class="float"&gt;palindrome checker&lt;/a&gt; &lt;br&gt; 
  &lt;a href="pyt_tkinter.html" class="float"&gt;gui for the temp converter&lt;/a&gt; &lt;br&gt; 
  &lt;a href="pyt_cd.html" class="float"&gt;gui for the palindrome checker&lt;/a&gt; 
  
  &lt;span&gt;html5/css3/js/jquery/django &lt;br&gt;
   &lt;a href="ass_eportfolio.html" class="float"&gt;eportfolio&lt;/a&gt;  &lt;br&gt;
  &lt;a href="ass_js.html" class="float"&gt;datavalidation with javascript&lt;/a&gt;  &lt;br&gt; 
  &lt;a href="ass_cd.html" class="float"&gt;implementing a given class diagram&lt;/a&gt;  &lt;br&gt; 
  &lt;a href="ass_canvas.html" class="float"&gt;html5 + canvas&lt;/a&gt;  &lt;br&gt; 
  &lt;a href="ass_interaction.html" class="float"&gt;html5 interaction&lt;/a&gt;&lt;/span&gt;&lt;/p&gt; 
   &lt;/b&gt;&lt;/span&gt;&lt;/p&gt;
  </code></pre>
  
  <p>CSS file: </p>
  
  <pre><code>.split-para      { display:block;margin:10px;}
  .split-para span { display:block;float:right;width:50%;margin-left:10px;}
  </code></pre>
  
  <p>Do anybody have an answer to why the result comes out like this?</p>
  
  <p><a href="http://jsfiddle.net/u7SMD/" rel="nofollow">http://jsfiddle.net/u7SMD/</a></p>
  
  <p>I've tried fixing this for an hour or so. I just want it on the same rows - with the python projects to the left and html5/css3 projects to the right next to each other.</p>
  
  <p>Is there any other code that I can use for doing this or do anybody see a solution?</p>
  
  <p>Thanks alot</p>