Question

I see in many browsers (FF,Opera,Ie) that elements I give them “inline-block” and “min/max width” , their width is automatically sets to “min-width”, and not max-width, as expected.
Is that normal behavior?

Can I solve it in css way (inline-block element with max-width)?
(I know about floats/tables/js, there are some reasons i need do it in this way)

here is the code

Answer 1

You are encountering a valid behavior. min-width means that the width cannot be less than the min-width value. On the other hand, max-width means that the width cannot exceed the max-width value (but it can be less). Thus if you specify both min-width and max-width on an empty element, its width is set to min-width.