title: Working with <section> in CSS
body: <p>I am working on a site and I am needing some help with the section tags and styling different sized boxes with my CSS. </p>
  
  <p><a href="http://www.ambergoodwin.com/ooo/index2.html" rel="nofollow">This is my website</a> </p>
  
  <p>I am working on a festival website and created these orange event boxes for each event. The content for each box is less or more than the next one, yet all the boxes stay the same height. How can I make it so that each box's height is adjusted to the content inside it?</p>
  
  <p>CSS</p>
  
  <pre><code>#events-box { margin: 60px 0 30px 0; width: 100%; }
  #events-box section { width: 100%; height: auto; background: url(../img/RESTAURANT-highlight.jpg) no-repeat; background-color: #f4911e; margin-bottom: 30px; border: 1px solid #6f1200; }
  #events-box section img { margin: 10px 10px 10px 10px; padding: 7px; border: 1px solid #333; }
  #events-box section h1 { font-size: 1.6em; font-weight: bold; line-height: 23px; color: #721501; text-transform: uppercase; margin-top: 5px; text-align: left; }
  #events-box section p { margin-top: 5px; width: 690px; color: #721501; }
  
  .events-text { position: relative; left: 250px; top: -205px; width: 700px; height: 200px; /*border: 1px solid #000;*/ }
  .events-text a {color: #721501; text-decoration: underline; font-weight:bold; font-size: 1em; margin: 0 3px 0 3px; }
  .events-text a:hover {color: #fff; text-decoration: none; }
  </code></pre>
  
  <p>HTML ---- This is just one of the many section events I have. I just used this one as an example for my code.</p>
  
  <pre><code>&lt;article&gt;
  &lt;section&gt; 
  &lt;img src="img/events/EVENTS-hestercreek.jpg" alt="Shellshocked" /&gt;
  &lt;div class="events-text"&gt;
  &lt;h1&gt;Saturday April 21st&lt;br /&gt;
  Cooking Class and private Dinner with Chef Jeremy Luypen from Terrafina at Hester Creek Winery.&lt;/h1&gt;
  &lt;p&gt;Begin with a wine and oyster reception at 6:30pm, followed by a private cooking class and intimate dinner in Hester Creek Winery's gourmet kitchen.&lt;/p&gt;
  &lt;a href="http://www.hestercreek.com/"&gt;Tickets available exclusively through Hester Creek Winery&lt;/a&gt;
  &lt;br/&gt;Location: Hester Creek Winery
  &lt;br /&gt;Time: 6:30pm
  &lt;br /&gt;Price: $135.00. Includes wine pairings, recipes, taxes and gratuities.
  &lt;/div&gt;
  &lt;/section&gt;
  &lt;/article&gt;
  </code></pre>