Problems using max-width on div

Question

I have a div which I'd like to remain at 960px when a browser window is scaled accordingly and up to 1100px when more screen real estate is available.

I tried using min-width:960px and max-width:1100px . All browsers seem to recognize the min-width but not the max. I actually tried it with each alone and using max the div just became hidden.

I'm not sure if any of my other rules affect the code but this is what i have

#div {
       min-width:960px;
       max-width:1100px;
       height:550px;
       margin-top:10px;
       background-image: url(../images/trans_bkg.png);
       background-repeat: repeat;
       position:absolute;
       right:10px;
}

Hopefully you understand what I'm trying to accomplish with the code but I can provide a screenshot if that would help.

Thanks

just go through of [this stackoverflow articale](http://stackoverflow.com/questions/1153994/using-max-height-on-div-element). Also refer [this msdn Article](http://msdn.microsoft.com/en-us/library/ms530809%28VS.85%29.aspx) — AB Bolim, Apr 05 '13 at 05:25
I thought about that but I don't want it at 100% if someone's browser window is large. It needs to remain at within 960px and 1100px — Martin Powlette Jr, Apr 05 '13 at 05:26
Try using CSS media query, in different resolution you can mention the width... — Saswata Sundar, Apr 05 '13 at 05:28

score 2 · Accepted Answer · answered Apr 05 '13 at 05:37

2

@media (max-width: 1200px) {

div
{
  width:1100px;
}


}

If the resolution is 1200px, the div's width will be 1100px.

Similarly you can write it for a range

@media (min-width: 680px) and (max-width: 1199px) {

div
{
  width:1100px;
}

}

answered Apr 05 '13 at 05:37

Saswata Sundar

586
1
4
15

Problems using max-width on div

1 Answers1