title: How do I float a div to the right of a title div without affecting the content of the title?
body: <p>I'd like to know how to get the following result:</p>
  
  <p><img src="https://i.stack.imgur.com/CLEGt.png" alt="enter image description here"></p>
  
  <p>Green is a container div 700 pixels wide. Blue is a title area which fills the green container width-wise with some title text centred in the middle. Red needs to float on the right without affecting the flow of the text in the title.</p>
  
  <p>How do I achieve this? I've tried floating the red box on the right but it seems to push the text in the title to the left for some reason.</p>
  
  <p><strong>Edit</strong> - For the record, I hadn't posted an example because HTML and CSS isn't really my area of expertise and I'm struggling to get back to an example where the text didn't align (having tried half a dozen different methods I've been reading).  </p>
  
  <p>Here's roughly what I was trying: <a href="http://jsfiddle.net/3fgytw0u/" rel="nofollow noreferrer">http://jsfiddle.net/3fgytw0u/</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;style&gt;
      #Container {
      width: 700px ;
      margin-left: auto ;
      margin-right: auto ;
      }
  
      #Title {
      background-color: red;
      text-align: center;
      }
  
      #GameGuidelines{
          align:right;
      width: 200px;
      background-color: grey;
      }
      &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="Container"&gt;
  
  &lt;div id="Title"&gt;
      &lt;h1&gt;This&lt;/h1&gt;
      &lt;h2&gt;Is&lt;/h2&gt;
      &lt;h2&gt;A&lt;/h2&gt;
      &lt;h2&gt;Long&lt;/h2&gt;
      &lt;h2&gt;Title Title Title Title&lt;/h2&gt;
  &lt;/div&gt;
  
      &lt;div id="GameGuidelines"&gt;
          &lt;ul&gt;
              &lt;li&gt;Some&lt;/li&gt;
              &lt;li&gt;Info&lt;/li&gt;
              &lt;li&gt;Here&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
  &lt;div id="Introduction"&gt;
      &lt;p&gt;Rest of the page continues here&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>