Help with media queries

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!

Not sure whether this is what you are looking for, but try using the display property with inline-block value for the div elements.

Example:

HTML Code:

---

  <div class="test"></div>
  <div class="test"></div>
  <div class="test"></div>
  <div class="test"></div>
  <div class="test"></div>

---

CSS:

Code:

---

  .test{
      display: inline-block;
   
      width: 30px;
      margin: 5px;
      height: 20px;
      background-color: green;
  }​

---

Try it online: http://jsfiddle.net/J6Gdp/

Reference: http://www.w3schools.com/cssref/pr_class_display.asp

:wave: