title: How to add a color in the <div> bottom content area?
body: <p>How can I add a color of the bottom part of a <code>&lt;div&gt;</code> using CSS? Let's say for example I have a <code>&lt;div&gt;</code> with the height of <code>100px</code> and I want the <code>top or upper 50%</code> of the <code>&lt;div&gt;</code> will be shaded with blue and the <code>50% bottom part</code> will be shaded with red. So how it is possible? </p>
  
  <p><strong>NOTE:</strong> Only one <code>&lt;div&gt;</code> needs to be use.</p>