Working with CSS max-width Property
Dec 18, 2013, by admin
The max-width sets the maximum content width of a block which does not include padding, borders or margins. An element to which max-width applied will never be wider than the specified value even if the width of an element is set to be wider. But sometimes problem occurred with this rule as if min-width is specified with a value greater than that of max -width, then the container’s width will be the largest value, means min-width value will be applied.
Combining max-width with the min-width
- img.content {
- max-width: 500px;
- min-width: 800px;
- }
Combining max-width with width
The max-width and width shouldn’t be applied to the same element using the same pixel, as one will override the other. If, for example, the width is set to 200px and the max-width is set to 300px, the actual width of the element will be 300px.
- img.content {
- max-width: 300px;
- width: 200px;
- }
In the above example, the width of the element will be fixed at 300px.
However, it is acceptable to set max-width and width when the values are different pixel.
- img.content {
- width: 50%;
- max-width: 300px;
- height: auto;
- }
The above example assigns a max-width of 300px to images with the class “content”, and also assigns a width of 50%:
Sometimes max-width attribute doesn’t work on IE then you can use below example.
- img.content {
- max-width:600px;
- width: expression(this.width > 600 ? 600: true);
- }
Hope you all like the post to get more updates like the page Bugtreat Technologies and like the page Cs Cart Template for our latest template update
