HTML/CSS Inline-Block no float Divs within divs

Question

I have 3 DIVs within a DIV. The boxes will have an image. Currently they are image placeholders for future.

I would like to use display: inline-block; to line them up on the same line. For some reason they are still vertical instead of horizontal. I do not want to use float as I feel float should be used elsewhere.

HTML:

<div class="quickboxes">
  <div id="box1"><img name="" src="" width="75" height="75" alt="">1</div>
  <div id="box2"><img name="" src="" width="75" height="75" alt="">2</div>
  <div id="box3"><img name="" src="" width="75" height="75" alt="">3</div>
</div>

CSS:

.quickboxes {
    display: inline-block;
}

#box1 {
    width: auto;
}

#box2 {
    width: auto;
}

#box3 {
    width: auto;
}

Answer 1

display:inline-block; needs to be in the css for the image divs, not the containing div.