Use of width and min-width

Question

When writing a webpage in html, can you use two different quantitative measures for width and min_width?

For example can you use:

width: 90%
min-width: 600px

Do they both have to be the same unit of measurement (px or %) or does it not matter? I'm trying this in a webpage but it is not working. I am using this to minimally size a jqGrid table, but I wouldn't think that would matter.

Shawana

Answer 1

These can definitely work together. The width declaration will be set 90% of whatever it's container width is. The min-width makes it so that element has to be at least 600px wide.

Lyingin

Thanks. This was not a cut-and-paste from my site, so I'm unsure what is causing the problem. But you validated my initial thought. Thanks! – Shawana

@WildBill: If you provided a link we could help you further. – Tiffinytiffy

Worth adding that the min-width property always overrides the width property (when they apply to the same element) regardless of the order of declaration in CSS. – Shriver

Try adding the semicolons ... ;-) – Xenophobe

Answer 2

It should be min-width: 600px;. They can be used together and can use different units. See an example here. The element will not shrink to any smaller than the min-width, if there is enough space it will use the width value, so in this case 90% of the available space.

Transeunt

Answer 3

You don't described exactly how you allow the user to change the grid size. If you use gridResize then you can add additional options like

$("#list").jqGrid('gridResize', {minWidth: 450, minHeight: 100});

Aureaaureate