Hi there everyone,

I have a site over here:

http://www.vikgfx.com

If you view it in a resolution of 1280 x 1024, the whole page would sit on the left side of the screen. I tried my level best to adjust the CSS but it just doesn't sit in the center.

Could anyone assist me in this? I designed that site in Photoshop and later sliced it and converted it into HTML/CSS but now the centering problem is bugging me a lot. You guys can view the source code of the site to check out the CSS/HTML.

Thanks in advance.

Recommended Answers

All 5 Replies

Member Avatar for rajarajan2017

If you use table, always have outermost table with 100% width to adjust to the resolution whatever you want.
If you use CSS, I think you should have div for wrapper the content.

Member Avatar for diafol

If you have a wrapper div, do this:

#wrapper{
  width: 900px; /*or whatever*/
  margin: 0 auto;
}

i'm not sure what your css looks like, but you will need two for IE and for FF:

if FF etc

body  {
    text-align:-moz-center;
    text-align:-khtml-center;
}

if IE

<!--[if IE]>

body  {
    text-align:center;
}

<![endif]-->

css

margin: 0 auto;

Member Avatar for diafol

WRT text-align, this then makes all descendants align to the centre. You then need to set your wrapper div to "left" or "right", if your language is RTL. IF you use the margin solution, be aware that users with early versions of IE, require the text-align:center:

For a *fool-proof* solution:

body{
  text-align:center;
}
#wrapper{
  width:900px; /*this could also be a percentage - BUT be careful - use a min-width and max-width to avoid silly sizes*/ 
  text-align: left;
  margin: 0 auto;
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.