0

I centered this absolute div:

<div style="
width:800px;
height:190px;
position:absolute;
left:50%;
margin-left:-400px;
border-width:10px;
border-style:solid;">
</div>

In maximized mode, it works normally. But when the width of the browser is smaller the div, I can't scroll to the left of the div, it was cut. I tested on Chrome and IE9

How can I center absolute div in windowed mode? What is the reason it is out of alignment?

user2174870
  • 247
  • 2
  • 11

1 Answers1

1

You'll probably want to change the div's width and height to percent values and then to center it, just do something like this:

top:0;
left:0;
right:0;
bottom:0;
margin:auto;
position:absolute;
  • When the width of the browser is smaller than the div, there is a scroll bar in the bottom. But I can't scroll to the left of the div, it was cut, I don't know why – user2174870 May 04 '13 at 20:34
  • That's because your `div` is set to `position:absolute;` which sets its vertical position above everything else, including ``. This means that the `div` does not stretch the `html` element, so the browser doesn't know it needs to scroll left. –  May 04 '13 at 20:38
  • Maybe what you need is to set the width of the `div` to something like `width:70%;` instead of `width:800px;`, so that it'll change its width according to the window. –  May 04 '13 at 20:39
  • Thanks, is there any way to keep static width:800px because I want to align with other element? Or anyway to tell browser scrolling to the left using javascript/jquery? – user2174870 May 04 '13 at 21:08
  • Well, if you want the `div` to have dynamic width, you'll need to use percent values. The centering will work regardless if you use px or % widths, but if your window is smaller than the size of the `div`, it'll be cut off. Also, not sure about the JS. Don't think it'll work. –  May 04 '13 at 22:51