Databases
StackOverflow2013
Postsdbo
POWorking with <section> in CSS
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWorking with <section> in CSS
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload