div centered but also fixed

Question

I know its possible a web game (travian) does it. what I'm trying to do is have a div of say 800 width that does 2 things:

First: if browser is more than 800 pixels wide the dive centers itself in the browser (this I have figured out)

Second if I drag my browser window smaller, my div scrolls off the left side of the page. I want it not go past the left side ( 0px) of page when page is smaller than 800.

Travian does it but I can't figure it out so any help would be appreciated.

this centers my box but when resizing browser it cuts off the left side (lets it pan past left edge of browser)

#NavBar {
    position: absolute;
    width: 425px;
    margin:0 -225px 0 -225px;
    height: 70px;
    z-index: 4;
    left: 50%;
    min-width: 425px;
    top: 15px;
    color: white;
}

Please post some relevant HTML/CSS demonstrating what you have tried. — Josh Crozier, Sep 20 '13 at 18:42
Your writing and your code do not fit together. What you would like to achieve can easily be done by the use of **media queries**. And having a _**felxible**_ container in combination with _**fixed**_ pixel values cannot work together. And when using media queries use relative units like `em`, because you design for the real viewport size and not one in pixels. — Netsurfer, Sep 20 '13 at 20:09
first I'm using media queries for a lot of stuff and second I just wanted a simple div that if the browser area was bigger than the div it would center itself. the whole positioning thing I'm still wrapping my head around — Jacqueline Loriault, Sep 20 '13 at 21:21
SERIOUSLY? off topic ? how is a programming question on a programming related site Off Topic ? Allow me to refer j08691 to his own question that if mine is off topic so is his: http://stackoverflow.com/questions/11587119/is-this-a-web-page-or-an-image — Jacqueline Loriault, Sep 24 '13 at 06:15

score 1 · Accepted Answer · edited Sep 20 '13 at 19:05

1

Try this CSS

.div-class{
 width: 800px;
height:400px;
margin:0 auto;

}

edited Sep 20 '13 at 19:05

Arun Bertil

4,598
4
33
59

answered Sep 20 '13 at 18:47

Irfan TahirKheli

3,652
1
22
36

had to modify this a tiny bit (add position:relative or the div hid under the rest but this worked for me thanks – Jacqueline Loriault Sep 20 '13 at 20:09

score 0 · Answer 2 · answered Sep 20 '13 at 18:44

Preview: http://jsfiddle.net/PJC4a/1/embedded/result/ (try resizing window)

Code: http://jsfiddle.net/PJC4a/1/

.box {
    width: 800px;
    height: 400px;
    background-color: blue;
    margin: auto;
}

This is one of the tricks that can be used to center div horizontally using css only.

div centered but also fixed

2 Answers2