So, here we go again.
We've all read many articles on fully centering an element of a webpage e.g. a div or an image, and most likely they were great. I've read some that use css and many that use javascript to achieve the desired look and feel of your webpage. What I want to talk about today, is centering the entire webpage.
For those of you who need an example, click here (opens in a new tab) and downsize the width of your browser. You should see the page keeping it's center point no matter how slim the window may be, as well as no horizontal scrollbars appear when you downsize.
You're probably asking "Why would I want to do this?".
Essentially, there is no real reason why you should do this, however, if you're looking to add a bit extra to your website, this could prove to be an interesting take on design.
Before we continue, allow me to point out the cons of this approach:
1) This method is not friendly to users with a low screen resolution (They will never see a horizontal scrollbar).
2) If you're looking for a W3C CSS Validation Tag, you won't get it because of one CSS3 property used in this method - overflow-x
So, let's get started.....
Essentially the first step you need to take is styling the body of your document:
body{
font-family: Arial, Helvetica, sans-serif;
font-size: 20px !important;
color: #161616;
background: #FFF;
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
text-align: center;
}
It is very important that you set both width & height (well mainly height) properties to 100%. We basically do this for MSIE6. With these properties set, IE6 now understands that it has the entire viewport to play with.
Next, by convention, I normally use #container, some may use #wrapper, but, you can use whatever naming convention you'd like for your container div. Your container div is very essential in this process. Your entire document shoud be placed inside this div. It is a good practice as it allows for you to position other divs behind or in front of it with ease. e.g. if you had jQuery lightbox implemented on your website.
#container{
display:block;
margin: 0px;
padding: 0px;
min-height: 100%;
height: auto !important;
height: 100%;
width: 100%;
position: absolute;
left: 0px;
top: 0px;
overflow:hidden;
}Now let me explain. First off, position the container div to provide future editing in regards to z-index and so on, although most likely you won't need to. The most important property is:
overflow-x: This is our code that eliminates the horizontal scrollbar. It is a CSS3 pseudo class and is not recognised yet as valid styling, however, it works on all platforms. However, there were issues when testing in browsers such as google chrome and mozilla firefox. What would happen is that if you selected an element and dragged your mouse, the entire page would shift to the left and the only way to reset it was by refreshing the page. So I devised a hack which by standards should only address Internet Explorer, but, it solved the problem, so I'm not complaining.
* html #container{
overflow:visible;
overflow-x:hidden;
}We use the height properties for sticky footers and backgrounds which I'll explain in another post, however, it's worthy of mention here.
min-height: 100%; height: auto !important; height: 100%;
Special thanks to Dustin Diaz and his post Min-Height Fast Hack. Essentially, the min-height property works as it should on all modern browsers i.e. you specify a minimum height, and the element conforms to it with the ability to become taller. However, some versions of MSIE, don't support it. You can use this hack to achieve min-height in those browsers. B.T.W. This also works for min-width.
So now we have our container styled. Your HTML should look like this:
<body>
<div id="container"></div>
</body>
Now let's create our extremely massive divs which allow for complete centering:
.holder {
padding: 0px;
width: 1300%;
margin: 0px 0px 0px -600%;
display: block;
}
Ah yes.... the holder class. We'll use this to encapsulate each layer i.e. nav, header,etc. We make it a class as we need to use it for each new block we make. Firstly, we adhere to the block layout by defining it's display as block. This is the default layout method of any container. It's not necessary to specify it, however, it's a good practice.
What I want you to note is the width property as well as the margin property. This is a concept which may seem confusing at first and there may be a much better approach, but let's examine it a bit.
Firstly, I've set the width to 1300%. I use that figure because it works best. You can have a larger figure, but, it won't be necessary, and a lower figure, does not give the desired effect.
By using 1300%, we are specifying that this element should be 13 times the size of the viewport width.
I know, I know, you're probably asking "Why not 1200 or 1400 percent?". We'll use an odd number for one sole reason. Think about the Maths involved. We have the viewport which is 100%. Then we have this container which is 1300% with a margin-left of -600%. So what does this mean?
This container will be placed -600% to the left, which gives us an excess of 700%. 100% will cover the viewport area, therfore, we have basically a 600% space to the right.
This container is now perfectly centered.
So if were to now add a holder div to our HTML with some random text, let's see what happens:
<body>
<div id="container">
<div class="holder">This is a test!</div>
</div>
</body>You'd most likely notice that there's no text. Why? Essentially, the text is aligned to the left; -600% to the left of the viewport.
"Oh no.... This is lame, it's not working well at all". Don't say that please. There's still hope. If you want the harder way out, you can set the text-align property to center. This way you'll see the text in the middle of the screen. Try that and see how it works. Resize your browser as well.
You should see the text staying center no matter what. It doesn't stop at the left edge of the browser.
But still, text-align: center? That means that all our text,images,etc. have to be re-aligned. That's way too much work.
So let's add our containers:
#header, #bodyElements{ width: 980px; margin-right: auto; margin-left: auto; overflow: hidden; display:block; padding: 20px 0px; } #header{ background: #161616; color:#FFF; height: 50px; }
N.B. margin-left & margin-right will work when you specify an explicit width. So if we add some elements to our code, let's see what happens:
<body>
<div id="container">
<div class="holder">
<div id="header">I'm The top level header div (I can be selected)</div>
</div>
<div class="holder">
<div id="bodyElements">I'm the top level body div (I can be selected) I have no background color attached</div>
</div>
</div>
</body>You should now see a dark grey div running straight across the top #header with the words "I'm The top level header div (I can be selected)" as well as some text below #bodyElements "I'm the top level body div (I can be selected) I have no background color attached".
Now we can be more creative. Let's say you have a sticky footer, and you'd like the #bodyElements div to seem like it's stretching all the way down or maybe you'd like to place animated gadgets or images behind your information, we can now freely do this, without having to touch our top level containers.
#container2{
display:block;
margin: 0px;
padding: 0px;
min-height: 100%;
height: auto !important;
height: 100%;
width: 100%;
position: absolute;
left: 0px;
top: 0px;
overflow: hidden;
}
* html #container2{
overflow: visible;
overflow-x: hidden;
}
#bodyBackgroundHolder{
padding: 0px;
width: 1300%;
margin: 0px 0px 0px -600%;
display: block;
}
#bodyBackgroundHolder{
position: absolute;
top: 90px;
height: 100% !important;
}#container2 takes the same styles as #container, also #bodyBackgroundHolder takes the same style as .holder.
The exception though with the #bodyBackgroundHolder div, is that we want to position this at a higher y position than the #header div so as to avoid being blocked out by the #header div background color.
From there we can add our lower level containers such as the #bodyBackground div:
#bodyBackground{
width: 980px;
margin-right: auto;
margin-left: auto;
overflow: hidden;
display: block;
padding: 20px 0px;
}
#bodyBackground{
height: 100% !important;
padding-top: 100px;
color: #0099FF;
background: #F5F5F5;
}Note well: In order to maintain the fully centered layout, your containers should maintain the same width.
So if we add the bodyBackround elements to our code, let's see what happens:
<body>
<div id="container2">
<div id="bodyBackgroundHolder">
<div id="bodyBackground">
<p>I'm The lower level body div (I can't be selected)</p>
<p>I can pose as a fully extended background if you add a sticky footer!</p>
<p>I can be used to add spice to your website e.g. flash animations, gif's, etc.</p>
<p><img src="ajax-loader.gif" width="32" height="32" /></p>
<p>By keeping them behind your information</p>
<p>I will move fluidly with your website, giving it a seemless feel!</p>
</div>
</div>
</div>
<div id="container">
<div class="holder">
<div id="header">I'm The top level header div (I can be selected)</div>
</div>
<div class="holder">
<div id="bodyElements">I'm the top level body div (I can be selected) I have no background color attached</div>
</div>
</div>
</body>As you can see we can add more and more layers as we see fit and in those layers, we can have intricate designs, cool animations, basically an infinite array of design additives.
Note also, our lower level containers (the ones being used as backgrounds) should come before our top level containers for indexing purposes.
And that's all folks.....
If you have any questions, feel free to leave a comment and I hope this works for you as it does for me.
No comments:
Post a Comment