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: 
`**[Demo](http://jsfiddle.net/4dgaurav/eqE9J/106/)**`

css

```
img {
    position:relative;
    float:left;
    max-width:33.33%;
    width: 33.33%
}

```
<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>