Member Avatar for RazorRamon

I'm centering my container div this way.

    #container{ 
position: absolute;
    left: 50%;
 margin:0 auto;  
  height:100%;
  width:1024px;
     margin-left: -512px;
     text-align:left; 
}

The div centers in the window, however when the user resizes the window to smaller than 1024 the window starts showing the center of the page. How can i make it to where the window will show the left side of my container when the window begins to shrink.

  • 3 Contributors
  • 2 Replies
  • 256 Views
  • 13 Hours Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

Short answer: the centering method you're using keeps the container's center fixed in the viewport, so when the browser becomes narrower than the container the left edge is pushed off‑screen. A robust, modern fix is to center for large viewports but switch to left‑aligned when the viewport is narrower than the fixed layout — done with a simple wrapper using flexbox (CSS-only) and an optional tiny JS fallback to ensure the left edge is visible during resize.

Example (CSS-only approach — different from the negative-margin and auto-margin snippets above):

/* page wrapper controls alignment */
.page {
  display: flex;
  justify-content: center; /* center on wide viewports */
}

/* fixed layout container */
.container {
  width: 1024px;
  box-sizing: border-box;
}

/* when viewport is narrower than the layout, left-align so the left edge stays visible */
@media (max-width: 1023px) {
  .page { justify-content: flex-start; }
  .container { min-width: 1024px; } /* forces overflow to the right while keeping left edge flush */
}

Optional JS fallback (useful in older browsers or to correct odd scrolling behavior on resize):

(function () {
  var c = document.querySelector('.container');
  function ensureLeft() {
    if (!c) return;
    if (window.innerWidth < c.offsetWidth) {
      document.documentElement.scrollLeft = 0;
      document.body.scrollLeft = 0;
    }
  }
  window.addEventListener('load', ensureLeft, false);
  window.addEventListener('resize', ensureLeft, false);
})();

Notes and troubleshooting

  • This avoids absolute-position negative margins and keeps your left edge visible once the viewport is smaller.
  • If you want the layout to actually shrink instead of overflowing, adopt a responsive strategy (relative units or max-width/width:100%) so content reflows. and pointed in that direction; the flexbox switch above is a targeted way to get the exact “center until narrow, then left-align” behavior.
  • Quick checks if it still misbehaves: ensure a standards DOCTYPE, reset default body margins, and test in multiple browsers (older browsers may need a non-flex fallback).

Recommended Answers

All 2 Replies

Member Avatar for epicrevolt

The proper way of centering you content on a page is as follows:

body {
    text-align:center;
}

#container {
    width:1024px;
    text-align:left;
    margin:0 auto;
}

To make the windows shrink when the browser width is below 1024 pixels, 2 CSS3 Methods become available to you: Media Quesries and max and min width. I recommend using Media Queries as they are easier to support in older browsers.

@media screen and (max-width: 1024px) {/*Essentially stating that if the max screen size is 1024, override/add the CSS inside*/
    #container {
        width:100%;
    }
}
/*Or use the code below instead of the original container DIV*/
#container {
    width:1024px;/*Just in case the browser cannot support the below min and max widths, this will be used*/
    max-width:1024px;
    min-width:600px;
    text-align:left;
    margin:0 auto;
}
Member Avatar for almostbob

pixels are not a layout tool.
pixel size depends on device resolutin
the typical 15" crt 800px wide 53px/inch
typical 'hi-res' crt 96px/inch
this laptop 160px/inch
ipad 264px/inch
12-14px text just got really samll (1mm)
current best practice is em or %, scalar quantities that autoadjust to window size, device resolution, user preference.

body { width:100%; text-align:center;} 
container {width:95%; text-align:left;}

works in every device

Edited by almostbob because: logical order
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.