3

I have a div that's centered, the width set to 50%, and the max-width set to 100%. However, when I zooms in, the width does not increase at all while the height increases every time I zooms in. Why is that happening even though I set the max-width to 100%, and how do I fix it? Thanks.

#outer {
border-radius: 10px;
background-color: #F5F5F5;
border: 1px dotted black;
width: 50%;
max-width: 100%;
margin: auto;
margin-top: 1%;
}

<div id = 'outer"></div>

P.S: I still want to use percentage over pixels.

pnuts
  • 58,317
  • 11
  • 87
  • 139
jessica
  • 1,667
  • 1
  • 17
  • 35

1 Answers1

2

I think I understood what you want. Your problem is where you put your <div>.

As you probably know, percentage is a relative measure. In particular, width: 50% is relative to parent's width.

Case 1

Parent's width is 100%. In this case, your div's width will allways be 50% of 100% which is 50% of the screen even if you zoom in/out.

Case 2

Parent div has an absolute width (for example 500px). Then, your div's width will be 50% of 500px, which is 250px. When you zoom in/out, this will change.

Here is a jsfiddle showing both cases. Hope this helps: https://jsfiddle.net/jormaechea/om91sody/

Joaquín O
  • 1,431
  • 1
  • 9
  • 16