Bring your website to the center of the browser

Today, I’m gonna teach you the very first and important step that you think of taking while you create your very new Websites. But, often you fall back when you encounter challenges.

Bring your website to the center of the browser

In this tutorial – I’ll take you successfully through one of those challenges. From now on – you need not fall back on this challenge. Because, this trick will be taken out of your existing knowledge. Nothing is there to be called a New Stuff.

Bring your website to the center of the browser - PepFrySo guys,I’ll teach you[Newbies/Beginners] – How to bring your website to the Center of the browser, any sort of Monitor irrespective of it width. As and when the monitors width changes, your Website needs to withstand the change. That is what I’m gonna teach you here.

What will you be learning here?

  •  To bring your Website to the center of any Screen/Monitor/Browser.

What will you use to accomplish this task?

  •  Pure CSS2 and HTML4

Here is a preview of what you’ll achieve at the end of this tutorial!

Bring your website to the center of the browser - PepFry

Bring your website to the center of the browser

And, here you go:

Step1: First off – Create the Markup needed for this tutorial.
We’ll keep it very simple and create 2 <div>’s. 1 to act as wrapper for the whole Website and the other as another wrapper to keep all the contents of your Website intact within a specified width.

Here is that simple Markup:

What we did?

We created the Outermost <div> Wrapper for your Website, which will and should be able to span through the entire space available on you Monitor screen. It will be accomplished using a Super Simple CSS, which I’ll be taking you through in the next step which will follow up shortly.

We created another <div> which comes after the Wrapper <div> and named as Container. This div keeps intact all your inner Layout structures like Header, Sidebar, Content area and Footer. This <div> will be fixed when it comes to width and will not span through the Monitor screen like the Wrapper <div>.

Step2: As your second step, you need to apply necessary Styles to make your Markup functional.

Here is that simple Style:

Isn’t it Super Simple? that’s it guys – you should be done by now.

Go-ahead and Run the HTML file in your favorite Browser and you’ll see your browser filled with a pitch black color all over and you Website with a lighter variant making itself out of the blues and centered on your Browser. Mind you – it will be the same, even if you Run the HTML file in an even bigger Monitor.

What we did?

We applied Styles for the 1st <div> named Wrapper. We asked the <div> to occupy all the available space in the Monitor screen – so that it can span through the entire Monitor width. For that we had to apply width: 100%. It is % and not px.

We applied Styles to the inner <div> named Container. It stays fixed, we supplied a width of 960px. This time around its px and not %.

The major role play is taken care by the Margin. As you can see Margin is set to 0 auto. It says the Container <div> to consider 960px of width out of the 100% space available on your Monitor screen. and also consider top and bottom margin as ZeroLeft and Right Margin as Auto. Again Auto plays the role here. Auto allows your website to automatically calculate the width of your monitor screen and adjust equally the either sides.

What if I do not use Margin: 0 auto? What will happen?

Here is what you get – when you do not wish to use Margin: 0 auto: You’ll see that your Website is left aligned!

Bring your website to the center of the browser - PepFry

Bring your website to the center of the browser

Here is the Output you get when you use Margin: 0 auto:

Bring your website to the center of the browser - PepFry

Bring your website to the center of the browser

Hope, you learn’t the basic idea of Bring your website to the center of the browser viewable area.

Any question – please write back to me, I’ll try to answer it asap. Hope to see your positive suggestions as well.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">