title: CSS - Sidebar not floating right of content
body: <p>I would like the <strong><em>sidebar</em></strong> div to fit nicely beside the <strong><em>main</em></strong> div and I have done this multiple times before... I have no idea why it is not working this time and need a fresh pair of eyes to help me work out the problem.</p>
  
  <p>Here is the full HTML:
  
  </p>
  
  <pre><code>&lt;head&gt;
      &lt;title&gt;SiteName | Home&lt;/title&gt;
      &lt;link rel="stylesheet" href="style.css" type="text/css"&gt;
  &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div id="screen"&gt;
              &lt;div id="header"&gt;
              &lt;img style="float:left;" src="C:\Users\Jack\Downloads\Images\GFX\Website\awesomeface.jpg" width="75px" height="75px"&gt;
                  &lt;div id="title"&gt;
                      &lt;h1&gt;SiteName&lt;/h1&gt;
                  &lt;/div&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="index.html"&gt;Gallery&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="index.html"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="index.html"&gt;Terms of Use&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;div id="body"&gt;
                  &lt;h2&gt;Welcome to the new website!&lt;/h2&gt;
                  &lt;p class="bindent"&gt;For Chryses sought with costly gifts to gain His captive daughter from the victor's chain. Suppliant the venerable father stands; Apollo's awful ensigns grace his hands By these he begs; and lowly bending down, Extends the sceptre and the laurel crown He sued to all, but chief implored for grace The brother-kings, of Atreus' royal race&lt;/p&gt;
              &lt;/div&gt;
              &lt;div id="sidebar"&gt;
                  &lt;h3&gt;News&lt;/h3&gt;
                  &lt;p class="sindent"&gt;Declare, O Muse! in what ill-fated hour Sprung the fierce strife, from what offended power Latona's son a dire contagion spread, And heap'd the camp with mountains of the dead; The king of men his reverent priest defied, And for the king's offence the people died.&lt;/p&gt;
              &lt;/div&gt;
  
              &lt;div id="footer"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>Here is the full CSS:</p>
  
  <pre><code>#screen {
  color: white;
  font-family: verdana;
  }
  
  #header {
  background: black;
  border: 8px solid darkred;
  padding: 1em;
  }
  
  #title {
  text-indent: 5em;
  }
  
  #body {
  padding: 1em;
  border: 8px solid darkred;
  background:#3d594b;
  }
  
  #sidebar {
  padding: 1em;
  border: 8px solid darkred;
  background:#3d594b;
  float: right;
  }
  
  #footer {
  }
  
  ul
  {
  position:relative;
  float: left;
  left: 50%;
  list-style-type:none;
  margin:0;
  padding:0;
  }
  
  li
  {
  float:left;
  position:relative;
  right:50%;
  }
  
  a:link,a:visited
  {
  display:block;
  font-weight:bold;
  width:200px;
  color:white;
  background-color:darkred;
  text-align:center;
  padding:0.75em;
  text-decoration:none;
  text-transform:uppercase;
  }
  
  a:hover,a:active
  {
  background-color:lime;
  }
  
  .sindent {
  text-indent:1em;
  }
  
  .bindent {
  text-indent:2em;
  }
  </code></pre>
  
  <p>As you can see I'm not clearing anything in the <strong><em>main</em></strong> div yet the <strong><em>sidebar</em></strong> div isn't floating right.</p>
  
  <p>Thanks for your time, in advance.</p>
  
  <p>EDIT:
  The width's I added were just to see if it would float and it still didn't.</p>
  
  <p>EDIT 2:
  Added full CSS and HTML.</p>