title: How to create a table cell with a two-colour background?
body: <p>I'm trying to create an HTML table cell with a two-tone background; so I have normal text on a background which is yellow on the left, and green on the right. </p>
  
  <p>The closest I've got so far is as follows. The background is correctly half-and-half, but the content text is displaced below it.</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;style type='text/css'&gt;
        td.green
        {
          background-color: green; 
          padding: 0px; 
          margin: 0px; 
          height:100%;
          text-align:center
        }
        div.yellow
        {
          position:relative; 
          width: 50%; 
          height: 100%;
          background-color:yellow
        }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body style="width: 100%"&gt;
      &lt;table style="width: 25%"&gt;
        &lt;tr style="padding: 0px; margin: 0px"&gt;
          &lt;td class="green"&gt;
            &lt;div class="yellow"&gt;&lt;/div&gt;
            &lt;div class="content"&gt;Hello&lt;/div&gt; 
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>How can I fix this up?</p>