CODEWITHSUNDEEP
htmlcss
VoidKing
VoidKing

Reputation: 6412

With CSS, what good is 'width' when you have to end up specifying 'min-width' and 'max-width' anyway?

I know I don't understand some of the things CSS does from time to time, but, often times, I set the 'width' style to an element (say an input element), but if there is space it grows to fill it (as if it were set to auto) and (say for a select element) if there are no option elements, it will shrink to the smallest size (when 'width' is still set).

I realize that these scenarios are easily handled with the 'min-width' and 'max-width' CSS styles, but my question is: Why even have a 'width' style when it doesn't really set anything anyway (seemingly)? What's really going on in this scenario?

I am seeking an answer that will benefit my understanding of how CSS behaves in this scenario.

--------------------------------------UPDATE---------------------------------------------

As others here have shown me, the behavior I was observing, must have been caused by some other factor (maybe because the input elements were in td elements? Sometimes tables do appear to do weird things), as clearly the jsFiddles shown here don't duplicate my scenario. Not sure how I misinterpreted CSS like this, but anyway, this question has still been helpful in that I benefited from the answers/explanations given as to when/why "min-width" and "max-width" should be used vs. simply setting "width".

In short, "width", "max-width", and "min-width" certainly have their uses, given the right scenario.

Upvotes: 1

Views: 153

Answers (3)

Rahul Shah
Rahul Shah

Reputation: 1407

If you dont know the original width of a container,and want it to restrict it to some width,then max-width is used

If the you want to spread out contents in a container,but dont want to it to exceed 200px,then you max-width is used,,,,,,,,

Consider this scenario

1.You are using width

2.(you dont know the width of the container)

3.You dont want it to exceed 200px

If you blindly put width="200px",then chances are there that the container may be only of 150px and 50px gets wasted in the screen.Hence max-width is used

Upvotes: 1

DwB
DwB

Reputation: 38300

the reason is this:

  • width - translate this to "this is the width I want for my element".
  • min-width - translate this to "please do not make my element width smaller than this value".
  • max-width - translate this to "please do not make my element width greater than this value".

Upvotes: 3

jon_shep
jon_shep

Reputation: 1463

So I did some digging for you. 97ldave is correct, it has to do with browser compatibility and screen resolution differences between users.

Take a look at w3schools - Width Property and then w3schools- Max-width Property. Scroll to the section called "browser compatibility." It looks like Width-min max are back supported farther in IE than the others.

Hope that helps, that website rocks as a quick reference.

Upvotes: 0

Related Questions