Render HTML only if channel has entries

Question

I have an area in my template that has room for a max of three entries, but if there are no entries the entire area needs to be hidden. I have the max of 3 entries showing, but I can't figure out how to add the logic it needs to hide the container divs

here's my code so far

<div class="specialoffers">
        <div class="homeshadow"></div>
        <div class="row">
            <h3>Special Offers</h3>         
            {exp:channel:entries channel="special_offers" dynamic="off" orderby="entry_id" sort="asc" limit="3"}            
                        <div class="large-4 columns offer left">
                            <a href="{site_url}index.php/offers/{url_title}">
                                {offer_image}
                                    <img src="{path}_offerpromo/{filename}.{extension}" alt="{title}"/>
                                {/offer_image}
                            </a>
                            <a href="{site_url}index.php/offers/{url_title}"><h4>{title}</h4></a>
                            <p>{teaser_text}</p>
                            <a href="{site_url}index.php/offers/{url_title}" class="darkgraybtn">Learn More</a>
                        </div>                  
            {/exp:channel:entries}
        </div>
</div> 

basically, if there are no entries the "specialoffers" div should not display.

Answer 1

You can address this by moving your channel:entries tag pair to the outside and then conditionally outputting your opening and closing HTML based on count.

{exp:channel:entries channel="special_offers" dynamic="off" orderby="entry_id" sort="asc" limit="3"}

    {if count == "1"}
    <div class="specialoffers">
            <div class="homeshadow"></div>
            <div class="row">
                <h3>Special Offers</h3>
    {/if}

        <div class="large-4 columns offer left">
            <a href="{site_url}index.php/offers/{url_title}">
                {offer_image}
                    <img src="{path}_offerpromo/{filename}.{extension}" alt="{title}"/>
                {/offer_image}
            </a>
            <a href="{site_url}index.php/offers/{url_title}"><h4>{title}</h4></a>
            <p>{teaser_text}</p>
            <a href="{site_url}index.php/offers/{url_title}" class="darkgraybtn">Learn More</a>

        </div>                  

    {if count == total_results}
            </div>
    </div> 
    {/if}

{/exp:channel:entries}

If there are no entries nothing will be output at all.