title: How to align text within div?
body: <p>In this fiddle <a href="http://jsfiddle.net/QLCeH/" rel="nofollow noreferrer">http://jsfiddle.net/QLCeH/</a> the text is not aligning with the header "Google" and the text is wrapping beneath the image.</p>
  
  <p>here is fiddle code : </p>
  
  <p>HTML : </p>
  
  <pre><code>&lt;div style="margin-left:auto;margin-right:auto; width: 600px;"&gt;
  &lt;div id="block"&gt;
  &lt;img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" /&gt;
  
  &lt;div style="font-size:20px;font-weight:bold;"&gt;
  &lt;a href="http://www.google.com"&gt;Google&lt;/a&gt;
  &lt;/div&gt;
  &lt;div&gt;
  This is some multi line text to show that multiple lines to not align very well.
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS : </p>
  
  <pre><code>*{
      margin:0;
      padding:0;
  }
  #block { 
      border-width: 2px; 
      border-color: #4682B4; 
      background-color: WHITE; 
      width: 200px; 
      text-align: center; 
      line-height:30px;
      padding:3px 0;
      padding-right: 100px;
      float:left;
  }
  img{
  float:left;
  }
  #block:hover {
    background-color: #C2DFFF ;
  }
  </code></pre>
  
  <p>How can the text be aligned with the header "Google" and also prevent it from wrapping beneath the image ? </p>
  
  <p>So that it appears like this : </p>
  
  <p><img src="https://i.stack.imgur.com/Imfxv.png" alt="enter image description here"></p>
  
  <p>I've tried text align but it doesn't seem to provide this kind of option ?</p>
  
  <p>Update : </p>
  
  <p>This is the code I am now using : </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
  &lt;title&gt;&lt;/title&gt;
  
  &lt;style type="text/css"&gt;
  #block img{
      display:inline-block;
      vertical-align: top;
      width: 50px;
  }
  #text{
      display:inline-block;
      vertical-align: top;
      width: 350px;}
  
  
  &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div style="float: left;display: inline;width=450px" id="block"&gt;
      &lt;img height="50" style="max-width: 50px;background:pink;;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" /&gt;
  
      &lt;div style="font-size:20px;font-weight:bold;" id="text"&gt;
          &lt;a href="http://www.google.com"&gt;Google&lt;/a&gt;&lt;br /&gt;
          &lt;p&gt;This is some multi line text to show that multiple lines to not align very well.&lt;/p&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  
  &lt;div style="float: left;display: inline;width=450px" id="block"&gt; 
      &lt;img height="50" style="max-width: 50px;background:pink;;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" /&gt;
  
      &lt;div style="font-size:20px;font-weight:bold;" id="text"&gt;
          &lt;a href="http://www.google.com"&gt;Google&lt;/a&gt;&lt;br /&gt;
          &lt;p&gt;This is some multi line text to show that multiple lines to not align very well.&lt;/p&gt;
      &lt;/div&gt;
  &lt;div&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>When I paste this code into IE8 this is the output : </p>
  
  <p><img src="https://i.stack.imgur.com/mZzWx.png" alt="enter image description here"></p>
  
  <p>On Chrome this is the output : 
  <img src="https://i.stack.imgur.com/14w3y.png" alt="enter image description here"></p>
  
  <p>The Chrome output is correct, is the css used not supported on IE8 ?</p>