How do I stop a CSS layout from distorting when zooming in/out?

Question

I've set up a very basic site with a #container div that includes the #navbar and #content. However, when I zoom in or out, the #navbar distorts, if I zoom in the links get pushed down below each other instead of being inline. If I zoom out, too much padding is added between the links. How can I stop this?

HTML:

<div id="navbar">
<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="top.html">Top</a></li>
    <li><strong><a href="free.html">FREE</a></strong></li>
    <li><a href="photo.html">Photo</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact Us</a></li>
</ul>
</div>

<div id="content">

<p>Some sample text.<p>

</div>


</div>

CSS:

#container {

    position: static;
    background-color: #00bbee;
    margin-left: 20%;
    margin-right: 20%;
    margin-top: 7%;
    margin-bottom: 15%;
    border: 2px solid red;
    
    
}

#navbar  ul{

    list-style: none;
    
    

}

#navbar  li{

    display: inline;
    
}

#navbar li a{
    
    text-decoration: none;
    color: #11ff11;
    margin: 3%;
    border: 1px dotted orange;
    padding-left: 4px;

}

#navbar li a:hover {

    background-color: white;
    color: green;

}

#navbar {

    background-color: #eeeeee;
    padding-top: 2px;
    padding-bottom: 5px;
    border: 1px solid yellow;
    
}

How can I stop it from distorting?

Also, I'm still pretty new to CSS, I was taught to use % instead of px. Is that right? Also anything else you've got to point out, please let me know.

What browser are you using to test with? They typically handle zooming very differently. I think the percentages will throw things off as well. — zim2411, Mar 14 '12 at 19:56
I wouldn't worry about it. Some browsers have 'text zoom' rather than zooming the whole page. Its probably better to focus efforts on layout not becoming distorted when the text size changes ... not browser zooming implementation, it will vary and you can't really control it. — yas, Mar 14 '12 at 20:01
I'm using firefox. There has to be a way to stop it from distorting, I know when I've tried making a css layout before, the different sections of the page would distort and go under each other. — Pztar, Mar 14 '12 at 20:08
Pztar, did you ever give an answer that you thought was satisfactory? — Kelderic, May 19 '14 at 15:59
@Pztar Regarding percentages, there's a time and a place. That also goes for px, em, rem, pt, pc etc etc... For keeping the layout looking the same, you probably want the related elements to use px — MDEV, Aug 10 '14 at 10:17

score 7 · Accepted Answer · answered May 14 '15 at 21:28

As this question still gets constant views, I'll post the solution I use currently.

CSS Media Queries:

@media screen and (max-width: 320px) { 

/*Write your css here*/

}

@media screen and (max-width: 800px) { 

}

Check out: CSS-Tricks + device sizes and Media Queries

score 4 · Answer 2 · answered Mar 15 '13 at 22:06

4

I had a similar problem that I fixed by adding an extra div around my navigation menu. I then added the following

#menu-container {
    position: absolute;
    white-space: nowrap;
    overflow: hidden;

}

This prevented it from wrapping. Hope it works.

answered Mar 15 '13 at 22:06

London804

1,072
1
22
47

2

hiding things is not the solution – Billu Mar 22 '18 at 13:00

score 1 · Answer 3 · edited Jun 27 '13 at 09:26

To fix the problem with zooming in, try adding the min-width attribute to your outer countainer (#container or #navbar?). Setting min-width prevents the webpage from trying to shrink down beyond the specified width (i.e. 300px). If you zoom in too far, instead of the elements inside the <div> jumping down onto the next line, your navbar will stop shrinking and a scrollbar will appear at the bottom of the page.

Example (in your stylesheet):

#navbar {min-width:300px;}

Another good way of achieving this is to apply the min-width attribute to the page body.

Example (in your stylesheet):

body {min-width:300px;}

Finally, if you want to make your navbar span the full width of the page, use {clear:both;} in the stylesheet.

Do not use { clear: both; } if you aren't using floats... and according to your example posted in the question you are NOT using floats. — PerryCS, Dec 05 '17 at 03:28

score 0 · Answer 4 · edited Jun 20 '20 at 09:12

0

I would just set absolute heights and widths to all elements/divs on the page.

id {height: 250px; width: 500px}

Or you could also use min/max-width/hight to adjust the page layout on different screen sizes or when resizing the browser window.

edited Jun 20 '20 at 09:12

Community

1
1

answered May 10 '14 at 11:48

Dominik Schmidt

537
1
8
22

score 0 · Answer 5 · answered Oct 07 '14 at 09:41

0

It is mainly because u have set your width or margin properties in percentage. If you do so make sure u provide maximum width to such element

answered Oct 07 '14 at 09:41

RedDevils

1

1

Please elaborate your answer – Adrian Forsius Oct 07 '14 at 09:43

score 0 · Answer 6 · answered Oct 10 '14 at 19:11

Here you go, this is a lot like the above suggestions but its got a fixed width content area, if you were looking for full width I'm sorry (;_;)

<style>
body {
    margin:0px;
}
#container {
    width:990px;
    background-color: #00bbee;
    margin:0 auto;
    border: 2px solid red;
}
#navbar ul {
    list-style: none;
}
#navbar li {
    display: inline;
}
#navbar li a {
    text-decoration: none;
    color: #11ff11;
    margin: 3%;
    border: 1px dotted orange;
    padding-left: 4px;
}
#navbar li a:hover {
    background-color: white;
    color: green;
}
#navbar {
    background-color: #eeeeee;
    padding-top: 2px;
    padding-bottom: 5px;
    border: 1px solid yellow;
}
</style>

<div id="container">
  <div id="navbar">
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="top.html">Top</a></li>
      <li><strong><a href="free.html">FREE</a></strong></li>
      <li><a href="photo.html">Photo</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact Us</a></li>
    </ul>
  </div>
  <div id="content">
    <p>Some sample text.
    <p> 
  </div>
</div>

score 0 · Answer 7 · answered Feb 18 '15 at 15:05

0

You're going to want to use a css media query to set break points for different styles in your css. Which if used correctly will fix any distortion issues.

answered Feb 18 '15 at 15:05

jimmybisenius

1

score 0 · Answer 8 · edited Jan 05 '14 at 04:46

0

Different browsers user different techniques for zoom. All of them have faults. Using percentages will introduce rounding errors. There are no easy answers.

See: http://www.codinghorror.com/blog/2009/01/the-two-types-of-browser-zoom.html

edited Jan 05 '14 at 04:46

BoltClock

700,868
160
1,392
1,356

answered Mar 14 '12 at 19:57

Diodeus - James MacFarlane

112,730
33
157
176

score 0 · Answer 9 · answered Mar 21 '12 at 01:55

0

Hmm....have you tried adding in min-width/min-height properties yet? You could just include those properties on your #container div. That might just do the trick.

answered Mar 21 '12 at 01:55

Lobabob

132
8

How do I stop a CSS layout from distorting when zooming in/out?

9 Answers9

id {height: 250px; width: 500px}

Linked