Member Avatar for AngelicOne

I'm having troubles with the website I'm making. When zooming out, the navigation bar's contact us link is going to the bottom. Each link is set to specific width so I can make it full horizontal but it seems complicated to specify width.

The content which is 800px at size is divided into two div tags, left is 399px(floated left), right 400px(floated right) and the remaining 1px is for the white border located at the center. The problem for the content is just like the navigation bar. The right part is going at the bottom.

This is the site http://angelickp.byethost24.com/AliceAcademy.php.

  • 3 Contributors
  • 6 Replies
  • 193 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Arkinder

Dani AI

Generated

’s symptoms (nav item and the right column dropping when zooming) come from total-width overflow: fixed pixel widths plus a 1px divider are added outside the content box in the default box model, and browser zoom produces fractional pixels/rounding that pushes floats to the next line. ’s suggestion to move away from px and ’s percent idea point in the right direction; combining that with a predictable box model and a modern layout avoids the problem.

Concrete, low-risk fixes to apply:

  • Make borders and padding part of the declared width with a global box-sizing: border-box.
  • Replace floats with a flex layout for the two columns and for the nav row so widths can shrink predictably.
  • Render the 1px center divider as an absolutely positioned pseudo-element (so it’s visual only and does not contribute to layout width).
  • For the nav, use a single-line flex row with flex-wrap: nowrap and overflow-x: auto as a graceful fallback instead of forcing fixed px widths on each link.
  • Use percents/ems or max-width rather than hard px for the container so the layout responds to zoom and different displays.

Example CSS pattern (adaptable to the current markup):

*, *::before, *::after { box-sizing: border-box; }

.wrapper {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  display: flex;          /* content columns */
}
.col { flex: 1 1 0; min-width: 0; padding: 12px; }

.wrapper::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 1px;
  background: #fff;
  transform: translateX(-0.5px); /* centers a half-pixel where needed */
  pointer-events: none;
}

nav ul {
  display: flex;
  flex-wrap: nowrap;
  margin: 0; padding: 0;
  overflow-x: auto;
}
nav li { flex: 0 0 auto; white-space: nowrap; padding: 8px 12px; }

Troubleshooting notes: ensure min-width: 0 on flex children so they can shrink; inspect computed widths in DevTools while zooming to see which element exceeds the container; test with different text-size/browser zoom and add a responsive breakpoint to stack columns or collapse the nav when space is limited. This approach preserves the visible 1px divider without it contributing to layout overflow.

Recommended Answers

All 6 Replies

Member Avatar for AngelicOne

I found out what the problem is. When zooming out, the border at the center is resizing. The navigation bar contains lots of border so it messes up too when zooming out. How to prevent this? I really need the border.

Member Avatar for Arkinder

What browser are you having this problem in?

Regards
Arkinder

Member Avatar for AngelicOne

Mozilla Firefox and Internet Explorer.

Member Avatar for almostbob

zoom is not an appropriate or useful test
users set the basefont to their specifications/requirements and expect that websites are current enough in code compliance to adjust around them
current best practice it to use em or % as layout tools
cease using px, the problem will disappear

800px columnn looks ridiculous on this 2600px monitor
800px pushes offscreen in small displays/portable devices

Edited by almostbob because: n/a
commented: very helpful +3
Member Avatar for AngelicOne

zoom is not an appropriate or useful test
users set the basefont to their specifications/requirements and expect that websites are current enough in code compliance to adjust around them
current best practice it to use em or % as layout tools
cease using px, the problem will disappear

800px columnn looks ridiculous on this 2600px monitor
800px pushes offscreen in small displays/portable devices

Do you mean i'll use % for image, border size etc.?

Member Avatar for Arkinder

He means use em or % for everything. Keep in mind that the actual value outputted by the em unit is based on font size.

An example for the % unit.

div#container {
    border-color: white white -moz-use-text-color;
    border-style: solid solid none;
    border-width: 10px 10px 0;
    margin-left: auto;
    margin-right: auto;
    overflow: auto;
    width: 69%; /* Instead of the 800px you were using */
}

Regards
Arkinder

commented: very helpful +3
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.