Fixing center alignment with negative margin-left trick for small window

Question

I have a div center-aligned that way:

<div id="container" style="position:absolute; top:0px; left:50%; margin-left:-500px; width:1000px;"></div>

As this solution Trying to center div horizontally and vertically in screen suggest.

The problem is that if the client's window's width (tried in FF 15.0.1) is smaller than 1000px the horizontal scrollbar won't allow to show the left side of the div.

Is there a pure html/css way to solve it?

does it ALWAYS need to be 1000px? or can it be width:1000px;max-width:100%;? — PlantTheIdea, Feb 21 '13 at 18:37
then no. position:absolute; forces it to exactly what you tell it, and the body will not expand for the larger width so there is nowhere to scroll to. — PlantTheIdea, Feb 21 '13 at 18:41

syed mohsin · Accepted Answer · 2013-02-21T19:52:56.413

Hmm. You can not resize client window.
1 thing that you can do is avoid the left scroll setting the width of parent div to 1000px

  <div id="parent" style="min-width:1000px;"> 
      <div id="container" style="position:absolute; top:0px; left:50%;
        margin-left:-500px; width:1000px;"></div>
  </div>

Note:
You might have to set the width of html and body tag to min-width=100%

Updated:

 <html style="min-width: 100%; background-color:Gray;">
 <body style="min-width: 100%; background-color:White;">
 <div id="parent" style="min-width: 1000px; position:relative;">
    <div id="container" style="position: absolute; top: 0px; left: 50%; margin-left: -500px;
        width: 1000px; border: 1px solid red; height: 10px;">
        1 2 3 4 5
    </div>
  </div>
 </body>
 </html>

I missed position:relative to describe. This code is working.

`

1 2 3 4 5

` Doesn't seem to produce the result... – Sami Feb 21 '13 at 19:35 — Sami, Feb 21 '13 at 19:35

Fixing center alignment with negative margin-left trick for small window

1 Answers1