CODEWITHSUNDEEP
htmlcss
kia4567
kia4567

Reputation: 603

Working with <section> in CSS

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>

Upvotes: 3

Views: 18406

Answers (2)

Jashwant
Jashwant

Reputation: 28995

Your .events-text has top:-205px and #events-box section img has height of something like 190px. They both gets add to your section height around 205px + 190px + (some margins and padding + border). So, your each section has height around 400px.

I dont think its a good way to hack things with negative top.

I recommend to use float.

Keep your #events-box section img float:left and .events-text to float:right and #events-box section to clear:both. I have tested it on firebug. It works :)

I hope it would help you.

Upvotes: 1

Kaushtuv
Kaushtuv

Reputation: 489

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

Upvotes: 1

Related Questions