Question about CSS positioning

D

dsarosh

Adept
Hi,
I have a simple question about CSS. I am reading a book and I checked some online sources too, but I would appreciate if I could get a simple solution here with the example code.

I want to design a page in which the body is 1024 pixels wide, but I want the body of the page to always be in the center of the monitor.

So, for example, if the user has a monitor that is 1440px wide then the <body> will occupy the middle 1024 pixels with equal margins on the left and right. Similarly, if the user has a wider monitor, the page will still appear in the middle of the monitor.

If the user has a 1024 resolution screen, then I do not want any margins to appear on the left and right side.

If the user has a monitor with less than 1024 resolution, then a horizontal bar can appear.

What I have been doing thus far is something like this

#central_area{
margin-left:10%; width:80%; margin-right: 10%;
}

However, I would like to be a bit more precise and ensure that the width is always 1024 pixels, and the margins vary according to the resolution of the monitor.

If someone can give me examples, I would appreciate it.
Thank you.
 
#central_area{

margin:0 auto;

width:1024px;

}

Ideally I would suggest you keep the width 1000px coz of the vertical scroll bar.
 
Hi,

Thanks very much for your quick response.

However, I forgot to mention that I actually needed it to work in Firefox as well as IE.

The book that I read suggested the same thing, and it works fine in Firefox. However, in IE it gets left-aligned.

What would be a browser-independent solution for this?

Thanks again,

Sarosh
 
I have the latest version 8.

The book I am reading also offered the same suggestion as you, but the author clearly mentioned that this wont work on IE.

I think he meant that it wont work on IE6 onwards or any version of IE.
 
A not so clean method would be to use

#central_area {

position: absolute;

left: 50%;

width: 1024px;

margin-left: -512px;

}

make sure margin-left is set to half of the width
 
Hi,

I found a solution that works, if someone would like to use it in the future.

Nesting one div inside another div seems to work. I tested this in Firefox and IE, and it works. The text-align attribute of the inner div can be changed, but it still appears in the middle of the browser.

<body>

<div style="text-align: center;">

<div style="width: 1024px; margin: 0 auto; text-align: left;">

Sample text

</div>

</div>
 
Back
Top