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.
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?
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 events in the section that I have. I just used this 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 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>
source to share
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;
}
source to share
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
float:left
both .events-text
before float:right
and #events-box section
before clear:both
. I tested it on firebug. He works:)
Hope this helps you.
source to share