title: CSS to keep two DIVs left and right?
body: <p>The source is:</p>
  
  <pre><code>&lt;article&gt;  
  
  &lt;div class="field field-name-body field-type-text-with-summary field-label-hidden"&gt;
    &lt;div class="field-items"&gt;
      &lt;div class="field-item even" property="content:encoded"&gt;
  
       Text at LEFT
  
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="field field-name-field-image field-type-image field-label-hidden"&gt;
    &lt;div class="field-items"&gt;
      &lt;div class="field-item even"&gt;
  
        &lt;img src="right.jpg" alt="at RIGHT" /&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/article&gt;
  </code></pre>
  
  <p>How can I change the CSS to make the two DIVs to look like?</p>
  
  <pre><code>+--------------+--------+
  |Text at LEFT  |    ####|
  |              |    ####|
  |              |    ####|
  |              |        |
  |              |        |
  +--------------+--------+
  </code></pre>
  
  <p>i.e. Text to alight top-left at left DIV, image to align top-right at right DIV.</p>
  
  <p>UPDATE:</p>
  
  <p>I am using something like:</p>
  
  <pre><code>.field-name-body {
      width: 320px;
      float: left;    
  }
  
  .field-name-field-image {
      width: 300px;
      float: right;
  }
  </code></pre>
  
  <p>but I am not sure how to <em>protect</em> the above class from polluting the css global name space. I wish I can limit the <code>float left</code> and <code>float right</code> within the <code>article</code> scope...</p>