PROBLEMS USING MAX-WIDTH ON DIV

marcel ethan

Total Post:105

Points:735
Posted by  marcel ethan
 953  View(s)
Ratings:
Rate this:
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
  1. AVADHESH PATEL

    Post:604

    Points:4228
    Re: Problems using max-width on div

    Hi Marcel!

    try this way!

    @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;
    }

    }

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!