title: Position:Absolute; Div is making the page too wide and adding blank space to the side. How do I reduce its size?
body: <p>I am currently working on the site at <a href="http://crowfell.com/index2.php" rel="nofollow">http://crowfell.com/index2.php</a>, if you enter a username into the log in form and log in a player profile appears in the top-right corner. When a user isn't logged in the page is fine, but once they've logged in the player profile div creates a 100% width div that starts at the right side of the page, extending it unnecessarily to the right into blank space.</p>
  
  <p>How can I stop a position:absolute div from having a 100% width?</p>
  
  <p>This is created using the following code:</p>
  
  <p>HTML/PHP:</p>
  
  <pre><code>&lt;div class='fixed'&gt;
      &lt;?php
          echo "&lt;h1&gt;" . $_SESSION['name'] . "&lt;/h1&gt;";
          include 'comp.php';
      ?&gt;
      &lt;p&gt;0 posts, 0 votes&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class='userimg'&gt;
      &lt;img src='images/user.jpg'&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.fixed { 
      /*font-family: 'Cinzel Decorative', cursive;*/
      width: 160px;
      color: #eeeeee;
      position: absolute;
      top: 0;
      margin-left: 86%;
  }
  
  .userimg { 
      position: absolute;
      top: 2px;
      margin-left: 78%;
  }
  </code></pre>
  
  <p>The PHP file in the include is simply a random complement generator and adds a short line, which is only affected by the div css.</p>
  
  <p>I have tried adding width:20%; to each css style, I have also tried giving it a low left value, adding overflow:hidden;, as well as containing the two divs in a third and giving that different width and overflow properties. None have worked!</p>
  
  <p>Thanks in advance for any help you can offer!</p>