Working with <section> in CSS

I am working on a website and I need some help with section tags and styles with different sizes with my CSS.

This is my website

I am working on a festival website and create these orange event boxes for each event. The content for each box is smaller or larger than the next, but all boxes remain the same height. How can I make it so that each window height is adjusted to the content inside it?


#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 events in the section that I have. I just used this as an example for my code.

<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 gourmet kitchen.</p>
<a href="">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.



source to share

2 answers

Try to float your tags starting with

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




In your .events-text

there top:-205px

and #events-box section img

it has a height of about 190px. They both add to your section a height of about 205px + 190px + (some margins and padding + border). So, each section is about 400px high.

I don't think this is a good way to hack negative top things.

I recommend using float.

Save #events-box section img


both .events-text

before float:right

and #events-box section

before clear:both

. I tested it on firebug. He works:)

Hope this helps you.



All Articles