Hi friends,

 

I have a problem, I'have made this website www.irinagachechiladze.com and its 950x575 website, which sits in a table which has width and height 100%.

This is the only way I haver found to centre the website from all sides, however in certain browsers it dose have horizontal or vertical scrolling.

 

can you guys help me?

is there any other way to centre in all browsers this my container div which is 950x575 from all sides?

 

 

thanks

Why don't you apply the width of the page to the container div and try "margin: 0 auto;" on it? Should work.

As far as I have learned, you shouldn't be using tables for layouts. Correct me if I'm wrong.

This is an example I've created to show you the concept working, http://jsfiddle.net/nPw75/

 

Then you need to remove your <table><td> </td></table> you added, then this is what you can replace your container with.

 

.container
{
   width: 950px; /* Width of your website */
   height: 575px; /* Height of your website */
   margin-left: -475px; /* -(width/2) */
   margin-top: -287px;/* -(height/2), well its an odd number, so its nearly half! */
   position: absolute;
   top: 50%;
   left: 50%;
}

 

 

This method will only work if you know what the width and height of your website will be.

Edited June 18, 201115 yr by markeh

This is an example I've created to show you the concept working, http://jsfiddle.net/nPw75/

 

Then you need to remove your <table><td> </td></table> you added, then this is what you can replace your container with.

 

.container
{
   width: 950px; /* Width of your website */
   height: 575px; /* Height of your website */
   margin-left: -475px; /* -(width/2) */
   margin-top: -287px;/* -(height/2), well its an odd number, so its nearly half! */
   position: absolute;
   top: 50%;
   left: 50%;
}

 

 

This method will only work if you know what the width and height of your website will be.

 

 

+1

 

Great solution.

Hey guys, I have just found out that the problem I was heaving was because of Facebook like button, it dose have width of 450 pixels, when you click on like the window pops-up, so that was it, now i have hidden the pop-up window and seems to me that it works, but I agree anyway that table is not any good for layout, so I will try another solutions replied here.

Thank you guys.

markeh - but if I use your solution and I resize the window to very small whole website goes under the browser window.

oops, I didn't realise that, managed to come up with a solution though. http://jsfiddle.net/heaHE/3/

 

@media (max-width: 950px) /* Width of your website */
{
 .container {
   margin-left: 0;
   left: 0;
 }
}

@media (max-height: 575px) /* Height of your website */
{
 .container {
   margin-top: 0;
   top: 0;
 }
}

 

If the window is smaller than the width and height of the website, it will now ignore all the positioning stuff.

 

If you haven't seen the @media query before, its quite simple really. The css within the query will only run if the website is below the max size (width or height).

Edited June 18, 201115 yr by markeh

Why would you use a table for that? Gah, tables should NEVER be used for website templates, they look ugly.

 

Instead, you should create a container like @markeh said

Markeh have you checked this code in opera? I have mac-opera and it dose not same way as in safari or chrome.