How do I center a website? - Post ID...

User 1886497 Photo


Registered User
148 posts

Not sure if this has been asked be four.

I have been looking around the web and a lot of websites are now in the centre, (example yahoo.co.uk) so that if you view the website on a 15" or a 15'4 monitor it will always stay in the correct place the centre.

I thought it would be easy, I tried 'div' commands and I can do it with images and text but I have no control of the design. In frontpage 2003 I use something called layer where I can drag an image or text where ever I like, it makes web design so easy.

I know they are phasing out layers as read in a number of blogs, is it possible to get the centre in browser to work with layers.

Any help would be much appreciated

Thank you.
Karl Williams.
www.karlwilliams.co.uk
User 42578 Photo


Ambassador
1,176 posts

Centering your content

One of the most asked questions is "how do I center my content?"

By "centering" we mean keeping all the content centered in the browser viewing area even at different resolutions and even if a user re-sizes the page.

By using a CSS "wrapper" this is very easy to accomplish.

There are basically 2 methods - a "liquid" or "fluid" method and a "rigid" method.
The "liquid" method adjusts the content width on the fly by having the content width be always a certain percentage of the entire viewport width.

This a accomplished by using the following code:

THE HTML:

<div class="wrapper"> all page content goes here </div>

THE CSS

div.wrapper {
margin-left : 10%;
margin-right : 10%;
}

This makes the width of the div.wrapper always 80% of the viewport width, whatever it may be.

However more designers prefer the "rigid" method which sets the content to a specific pixel width.

"Rigid" in this case means setting the "wrapper" to a specific width that will fit most common broswer resolutions without causing a horizontal scrollbar to appear.
It used to be the most common screen resolution was 640px wide. Today however it is much more common to have a 800px or 1024px width. It is not however a good idea to set this width wider like 800px because even with a browser maximized window there are still pixels being used for the vertical scroll bar.

To account for this you should use a width of no more than 770px.

How about the user that has his resolution set at 1024px?
If the user maximizes their window that leaves appx 230px of horizontal window space left over. It has to go somewhere.

The cleanest solution is to split this blank space in half and put it equally on either side of the wrapper. However we can't use ordinary margins to do this.
Percentage sized margins won't work with a pixel-sized wrapper.

CSS to the rescue....

CSS has a property called "auto" for margins. If the values for the side margins are set to "auto" the resulting side margins become equal and automatically fill the remaining horizontal space, giving us one centered box and equal margins on either side. Just what we want.

This works great in most modern browsers, BUT all versions of Internet Explorer/Win previous to version 6 do not support "auto" margins. Even IE6/Win will fail if the browser is not in "standards" mode based on the doctype of the web page.

So how do we get around this?

Well IE has a bug in it that lets us make a CSS hack to fix this problem.

The CSS property "text-align" can have values of left, right, center, justify, and inherit. This property is normally applied to a block level element such as a paragraph. This causes all the inline content within that element to be aligned with the value assigned to it.

However IE/Win browsers incorrectly apply this property to ALL the elements in the "text-align" box and not just the inline content as it is supposed to.

Do you see what this means - IE/Win fails to support "auto" margins, BUT, it does incorrectly center boxes when they are nested inside another box that has "{text-align : center;}.

So how do we use this to get our centered wrapper. We set the body to text-align : center, and then use the wrapper to reset our text to align left.

THE HTML:

<body>
<div class="wrapper"> all content goes here </div>
</body>

THE CSS:

body {
text-align : center ;
{
div.wrapper {
text-align : left ;
margin-left : auto ;
margin-right : auto ;
}

Now we have a web page with all the content centered in the broswer window with even margins on both sides.

Almost finished. There is one other minor problem that has to be addressed.

Gecko-based browsers (Firefox, Netscape, Mozilla) have a problem when using auto side margins. They interpret it very literally.

What happens is, if the user narrows the page to less than that of the wrapper width, these browsers will let the content flow off the left and right sides evenly. This means that a horizontal scroll bar will appear and let you scroll right to get that content, but the content sent to the left disappears and cannot be retrieved.

There is a way to fix this problem.

The easiest method is to set a minimum width on the body element that is the same width as our wrapper.

So our final markup looks like this:

THE HTML

<body>
<div class="wrapper"> all content goes here </div>
</body>

THE CSS

body {
text-align : center ;
min-width : 770px ;
}

div.wrapper {
text-align : left ;
margin-left : auto ;
margin-right : auto ;
}

There is also a method of using a border around your wrapper so you don't need the min-width property, but it introduces another IE/Win bug and hack.

For now just stick with the above it will work on all browsers under any operating system.

Mike...
..........................................
http://www.wpdfd.com
User 1886497 Photo


Registered User
148 posts

Thanks for the answer it went straight over my head, ill have to read it again when I got my focus head on.

Really appreciate you taking time to help me.

Thanks again

Karl
Karl Williams.
www.karlwilliams.co.uk
User 364143 Photo


Guest
5,410 posts

Try this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Center Wrapper</title>
<style type="text/css">
#wrapper {
border: 1px solid #000000;
height: 500px;
width: 800px;
margin-right: auto;
margin-left: auto;
}
</style>
</head>
<body>
<div id="wrapper">
Look, I'm center stage.
</div>
</body>
</html>


Notice the element margins are auto in the style selection.
CoffeeCup... Yeah, they are the best!
User 463058 Photo


Ambassador
1,080 posts

Looking at the code Tom posted, notice this bit:

<body>
<div id="wrapper">
Look, I'm center stage.
</div>
</body>


<div id="wrapper"> needs to be inserted right after the opening body tag, and its end </div> needs to appear just before the closing body tag.

Everything else you already have in the body section of your html will then be contained within this #wrapper div. Because you are using absolutely positioned elements, or layers, on your page and you want them to move with this container, you need it to have relative positioning, so your styling would look something like the following. Adjust your width and height as necessary.

<style type="text/css">
#wrapper {
width: 800px;
height: 500px;
margin-right: auto;
margin-left: auto;
position:relative;
}
</style>


Even with this code, your content may not center correctly without other modifications, depending on how you originally positioned your page elements which we have no way of knowing without seeing your page.

Or it may be that FP did things in such an odd way, that none of this will work. Do you have a url we can look at to see the current page and its code?
User 1886497 Photo


Registered User
148 posts

Thank you for helping me, Cary the information you gave me has sorted my problem out.

Thank you again

Karl
Karl Williams.
www.karlwilliams.co.uk

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.