Question

I am working on a site and I am needing some help with the section tags and styling different sized boxes with my CSS.

This is my website

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?

CSS

#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; }

HTML —- This is just one of the many section events I have. I just used this one as an example for my code.

<article>
<section> 
<img src="img/events/EVENTS-hestercreek.jpg" alt="Shellshocked" />
<div class="events-text">
<h1>Saturday April 21st<br />
Cooking Class and private Dinner with Chef Jeremy Luypen from Terrafina at Hester Creek Winery.</h1>
<p>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.</p>
<a href="http://www.hestercreek.com/">Tickets available exclusively through Hester Creek Winery</a>
<br/>Location: Hester Creek Winery
<br />Time: 6:30pm
<br />Price: $135.00. Includes wine pairings, recipes, taxes and gratuities.
</div>
</section>
</article>

Answer 1

Try floating your tags starting from

#events-box {
float: left;
margin: 60px 0 30px;
width: 100%;
}

#events-box section {
background: url("../img/RESTAURANT-highlight.jpg") no-repeat scroll 0 0 #F4911E;
border: 1px solid #6F1200;
float: left;
height: auto;
margin-bottom: 30px;
width: 100%;
}

#events-box section img {
border: 1px solid #333333;
float: left;
margin: 10px;
padding: 7px;
}

add min-height here instead of height

.events-text {
float: left;
min-height: 200px;
position: relative;
width: 700px;
margin:0 0 18px 0;
}