Question: I am trying to create a div with 3 images side by side. I want these images to be able to grow and shrink with the window size but to always be side by side.

I've tried a lot of different things but this is where I left off. They appear side by side but they go off the screen. One will start to shrink a little but that's it. 

```
#mobileNavHeader {
    display: block !important;
    white-space: nowrap;
    width: 100%;

    div {

        margin-left: auto;
        margin-right: auto;
        max-width: initial;
        img {
            max-width: 100%;
            width: auto;
            height: auto;
        }
    }

}

<div id="mobileNavHeader">
    <div>
        <a href="#mobileNav"><img src="/images/mobile-menu.png" id="mobileNavButton" /></a><img src="/images/mobile-logo.png" id="mobileLogo" /><a href="#"><img src="/images/mobile-search.png" id="mobileSearch" /></a>
    </div>
</div>

```

Answer: 
Let's analyze some possible solutions. The first one has been already pointed out, but I'll analyze it.

Solution 1
----------

```
img {
    float:left;
    min-width:33%;
    height:auto;
}

```

Yeah, `float:left;` is pretty nice, but it has a problem. Every time you have multiple elements *floating*, you need to add `<div style="clear:both;"></div>` after them to fix the rest of the page, which may not appear like you'd like to.

I usually prefer this solution, unless I'm not allowed to use blocks for some reason:

Solution 2
----------

```
img {
    display:inline-block;
    margin:0;
    min-width:33%;
    height:auto;
}

```

Analysis
--------

* `min-width` in this case fits better than `max-width`: if every element wants at least 1/3 of the page, and you have 3 elements, you are just fine;
* `height:auto` will resize your image, so it doesn't get stretched;
* `margin:0` is optional: when you use `display:inline-block`, 4 blank pixels are added between each block. This CSS just removes them.
* `display:inline-block` is cleaner, and doesn't need a "fix" after usage.

Here's a [Fiddle](http://jsfiddle.net/jH6ef/ "Fiddle").
<http://jsfiddle.net/eQ3cu/1/>

```
*{
  -moz-box-sizing: border-box;
  box-sizing: border-box;
} 
#mobileNavHeader{
  width: 100%;
  padding: 1%;
}

img{
  max-width: 33.33%;
  width: 33.33%;
  float: left;
  height: auto;
}

```

The answer with the plain css has the right css, but if you want to add margin to the images to separate them you will need to lower the max-width / width elements. I use 30% in those cases for margin, but it becomes more unreliable.

If you want a responsive website look into media queries. This will open a new world of flexibility for you.

<https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries>