Question

The CSS code below creates a rectangle of variable width, always 250 pixels from the left edge of browser and 30 pixels from right edge of browser.

How can I create a rectangle of fixed width 1,000 pixels, centered in browser (and flush to left side of screen if browser is made narrower than 1,000 pixels)?

Thanks in advance,

J. W.

.loginbackground {
position: absolute;
height: 73px;
left: 250px;
right: 30px;
top: 20px;
text-align: left;
margin-bottom: 3px;
padding: 0px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
font-weight: normal;
background: powderBlue;
}

Answer 1

Setting the margin property to 0 auto will center a div:

div {
    width  : 500px;
    height : 100px;
    margin : 0 auto;
}

Here is a jsfiddle: http://jsfiddle.net/jasper/dEdqk/