Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Making fixed-width rectangle that floats in center of screen

Tags:

css

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;
}
like image 471
John Avatar asked Dec 21 '25 14:12

John


1 Answers

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/

like image 153
Jasper Avatar answered Dec 24 '25 05:12

Jasper



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!