Can't Get Images to Line Up Horizontally Within Div

Question

I'm making a Fluid Grid Layout webpage. The bottom div contains 4 square images in a horizontal line. In the mobile mode, I want these 4 images to remain in a horizontal line and shrink to fit. I tried Block - Display - Inline-Block and I tried Block - Whitespace - nowrap, but neither works. The images just wrap themselves below one another without shrinking in size. They only shrink when I drag the entire page horizontally to less than the width of any one image.
This is the page:
http://savcp.com/index-fluid-12.html

Answer 1

Have a look at my version:
        *, *:before, *:after {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        #awards {
            margin: 0 auto;
            padding-bottom: 4%;
            vertical-align: top;
            width: 60%;
        .columns {
            float: left;
        .four {
            width: 25%;
        .columns img {
            display: block;
            width: 100%;
            padding: 10px;
     <div id="awards" class="clearfix">
        <div class="four columns">
            <img alt="Manhattan Bride" src="placeholder.png">
        </div>
        <div class="four columns">
            <img alt="The Knot" src="placeholder.png">
        </div>
        <div class="four columns">
            <a href="pressrelease-01.html">
                <img alt="Bride's Choice" src="placeholder.png">
            </a>
        </div>
        <div class="four columns">
            <a href="http://www.mitzvahmarket.com/mitzvah-ideas/misc/dancejock-productions-present-madisons-squ are-garden/">
                <img alt="Mitzvah Market" src="placeholder.png">
            </a>
        </div>
    </div>
This works - set the width of the #awards container to a percentage that works for you. You may want to add a max-width and min-width in em/px to limit the fluid design somewhat.
This would also work on the "how we met" page.
Al Sparber is correct in saying you should unfloat those divs when the screen size becomes too narrow to accomodate those four columns.
And a couple of other tips/suggestions:
- #awards: remove clear:both (apply clearfix instead); remove display:block (a div is by default a block level tag already); remove float:left; (no need to float this to the left); remove margin-left:0 (a div by default already is set to a margin of 0 on all sides); and remove the width:100% (all block level tags by default go as wide as they can, so again no need for 100% width)
- you have three rules with mostly identical properties set for the #awards div. Clean this up, and define only one id selector.
- same for all the other main layout elements: three rule definitions for each! Think DryCSS (Don't Repeat Yourself). And only apply css properties that actually change the default behaviour of an element.
- remove the float:left, clear:both and display:block from all those layout divs as well. Why would you add these to your main layout elements?
- only apply a clearfix to parent layout elements that contain floated child elements.
- when the pagecontainer div is set to a width, do not add 100% width to the child layout elements. Not required.
- most of your image elements are missing the alt attribute. You should add those (otherwise the html will not validate).
- structure your menu with an unordered list
- The non-flash version of the image slideshow uses the gif image format. Unless you mean to add an animated gif Instead either use jpg or png. Many reasons for this - google it. And do not use Photoshop's limited save for web function to optimize your pngs. In my opinion, use other tools for both jpg and png (Color Quantizer, anyone?). Saves a LOT of bandwidth.