在CSS中使用最小宽度

Question

i am having problems with using the min-width; code in CSS,

I have a menu bar that i would like to fix so it doesn't decrease in width as the browser size changes, my problem is that when i try min-width:1000px; this doesn't work,

Please will you take a look at my CSS and see if there are any errors,

CSS:

#bar {  
margin-top:55px;
min-width:1000px center;
max-width:1920px;
height: 30px;
background: #2E2E2E;
border: 3.2px groove #FFD700;
min-width:1000px; }

Thankyou for your help

Answer 1

remove this min-width:1000px center;

and have your css like this for the widths

#bar {
    max-width:1920px;
    min-width:1000px;
    width: 100%;
}

Answer 2

By what i understand.. in CSS min-width:1000px center; will not work properly. So remove the word center from that I have also made a fiddle please see it. Hope it helps.

Answer 3

I just tried out your css, and it stays 1000px wide even in a tiny window. You could try to remove one of the min-width you have declared, I suggest the first one.

Answer 4

That's happening because your div is using the max-width property.

Try to use the width based on percentage and you'll understand the power of min and max width.

See here. or:

#bar {  
    margin-top:55px;
    max-width: 500px;
    width: 100%;
    height: 30px;
    background: #2E2E2E;
    border: 3.2px groove #FFD700;
    min-width: 300px; 
}