Hi all

I'm pulling out what little hair I have left -- I need some help from a css guru

This aside is set at 100% width and contains images that scale as viewport changes.

HTML Code:
        <aside id="promo-container" class="overflow" style="background-color:#fff; border-top:1px solid #000000; margin-top:-5px; height:auto;">
                <div style="width:31.25%; float:left; margin-left:1.9%;"><img src="Images2013/PromoImages/MadeInAmericaPromo.jpg" /></div>
                <div style="width:31.25%; float:left; margin:0 1.041667%;"><img src="Images2013/PromoImages/DownloadCatalogPromo.jpg" /></div>
                <div style="width:31.25%; float:left; margin:0;"><img src="Images2013/PromoImages/SamplePromo.jpg" /></div>            
        </aside>
And here is my media querie:

HTML Code:
		/* Note: Design for a width of 320px */
        @media screen and (max-width: 767px) 
        {
            #page-wrap { width: 300px; }
            #home-master-aside { display:none; }
        }
What I want to have happen is set the float to none and have them stack vertically instead of horizontally.

I've tried #promo-container div { float:none; width:100%; } and a bunch of other combinations, but no luck at all in getting them to stack on top of each other.

What am I missing?

Thank you!