inline-block max-width not working in firefox
css, firefox, html
Solution
The `.content` element is displayed as `inline-block`, so its width depends on its children width. In your case, its children ask for 350px, so it will always have a width of 350px even if the screen is smaller.
If it was a block element, its width will be the width of its parent. So the images will be resized when there will be not enough space on the screen. This is what happen on Chrome.
Demo with block
If you want your `.content` element still be displayed as an `inline-block` element, you could add the proprety `max-width: 100%`. With this you're telling it to never have a bigger width than its parent.
Demo with inline-block & max-width
This is not exactly what you want. The default box-model say that the visual width is the addition of `width`, `padding` and `border`. On tiny screens, the `.content` element has the width of its parent + its own padding. Happily, you could change the box-model width the `box-sizing` property.
Demo with inline-block, max-width, and box-sizing
Problem
I need to wrap several images inside a div width a static padding. Div must be horizontally centered. And I need it to be responsive, i.e. max-width of div (including padding) must be set to 100%. ``` <div class="content"> <img src="http://placehold.it/350x150"/> <br/> <img src="http://placehold.it/250x150"/> </div> ``` css: ``` body { text-align:center; } .content { padding:20px; background-color:red; display:inline-block; } img { max-width:100%; height:auto; } ``` (http://jsfiddle.net/Nu8nV/) This sample works fine in Chrome and Safari, but not in Firefox (images are cropped when scaling down the width). Has anyone a solution?