MrBool
You must be logged in to give feedback. Click here to login
[Close]

You must be logged to download.

Click here to login

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to Center WebPages with CSS

The aim of this article is to make every reader understand the process to horizontally center the content in a web page of your website.

[close]

You didn't like the quality of this content?

Would you like to comment what you didn't like?

When we say, we need to centred the content, this means that it is required to keep the entire content in a centred position as far as the browser viewing area is concerned. This would take place even with different resolutions as well in the case when the size of the page is modified by the user. We will achieve this making use of the CSS where we basically have 2 methods known by the name of “fluid or liquid” method and the other would be a “rigid” method.

Introduction to "Liquid" Method

The purpose of the "liquid" method is to adjust the content width on the fly. This will be accomplished by having the content width to be always a specific percentage of the entire viewport width.

The following code is used to accomplish the same:

Listing 1: Illustrates Liquid Method

THE HTML:<div class="wrapper"> all page content goes here </div>
THE CSS:div.wrapper {
margin-left : 10%;
margin-right : 10%;
}

This will make the width of the div.wrapper that will always be 80% of the viewport width.

Introduction to the "Rigid" Method

There are more developers in this world that would always prefer to make use of the "rigid" method that would set the content to a specific pixel width. What does "Rigid" means in this case? Talking about “Rigid”, it means to set the "wrapper" to a particular width that will fit most common browser resolutions. This will be done without causing a horizontal scrollbar to appear.

The most common screen resolution in earlier days always used to be resolution was 640px wide however if we talk about the screen resolution nowadays, 800px or 1024px width is the most common of all. However, it is not a good point to make this width wider like 800px for the reason that even we have a browser maximized window, there would still be pixels that are being used for the vertical scroll bar. In order to overcome this, one must make use of a width of no more than 770px.

Talking about the user with a resolution set at 1024px and in this case if the user maximizes their window that leaves approximate 230px of horizontal window space left over that needs to go somewhere. The only solution to overcome is to split this blank space in half and put it equally on either side of the wrapper but whenever ordinary margins cannot be used to do this. Here comes CSS into picture.

CSS has a property that is known by the name of "auto" for margins. In case the values for the side margins are set to "auto", we will have the resulting side margins that will become equal and also this will automatically fill the remaining horizontal space. This would provide us one centred box and equal margins on either side and this was what we were expecting. This is known to work well in all the latest browsers however when it comes to earlier version of IE or Windows that are earlier than version 6, it does not support “auto” margins. In fact IE6 will also not support in case we don’t have the in "standards" mode based on the doctype of the web page.

Well IE has a bug in it that that needs the assistance of CSS hack to fix this issue. The property of the CSS known by the name of “text-align” can have values that are left, right, center, justify, and inherit. This property is normally applied to a block level element like a paragraph that in turn causes all the inline content within that element to be aligned with the value assigned to it.

But we have the IE/Win browsers that are incorrectly applying this property to the entire elements in the "text-align" box and not just the inline content. This means that IE/Win fails to support "auto" margins, however it does incorrectly center boxes in the situation when they are nested inside another box having "{text-align : center;}.

So the question now is how to make use of this to get our centred wrapper? We would set the body to text-align : center, and then we will make use of the wrapper to reset our text to align left.

Listing 2: Illustrates “Rigid” Method

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 ;
}

We now have a web page with all the content centred in the browser window and that too with even margins on both sides. We are almost done with our tutorial however there is still one critical issue that needs to be addresses. The browsers such as Firefox, Netscape, and Mozilla face an issue when it comes to using auto side margins for the reason that they interpret it very literally. Here in this case, when the user narrows the page to less than that of the wrapper width, the browsers mentioned above will allow the content to flow off the left and right sides in an evenly manner.

This signifies that we will have at a horizontal scroll bar appearing that would allow you to scroll right to get that content, however talking about the content that is sent to the left, it disappears which cannot be retrieved thereafter.

Let us try to figure out the solution to this issue.

The simplest and the easiest of the methods available are to set a minimum width on the body element that would be exactly similar to the same width as our wrapper.

Hence the final code looks as mentioned below:

Listing 3: Illustrates HTML and CSS body Code

THE HTML:<body>
<div class="wrapper"> all content goes here </div>
</body>
THE CSSbody {
text-align : center ;
min-width : 770px ;
}
div.wrapper {
width : 770px ;
text-align : left ;
margin-left : auto ;
margin-right : auto ;
position : relative ;
}

The last line in the CSS code “position: relative” needs to be noticed since this line is just required in case you have absolutely positioned elements on your page. In case you see anywhere the presence of the code "position: absolute", there is a need to incorporate this line of code to your CSS file else there is no way one can even get near to get a centred page.

There is also a method present so as to use a border around your wrapper. This would make restriction to use of the min-width property; however this introduces one more IE/Win bug and hack. The above example we explained will however work on all browsers under any operating system as of now.

Example of webpage centered

Figure 1: Example of webpage centered

Conclusion

We learned with the help of this article to center the content of a web page and how to resolve the issues in the earlier versions of Internet Explorer.



I am a software developer from India with hands on experience on java, html for over 5 years.

What did you think of this post?
Services
Know how to keep MrBool Online
SUPPORT US
SUPPORT US
With your help, we can keep providing free content and helping you to be a better professional
support us
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually � in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits � in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login