Life on the Edge: Making Your Website Span to the Edge of the Browser Window

Here’s an oldie, but a goodie.  One of the questions I get a lot is, “Why isn’t my website reaching all the way to the edge of the browser window, and how do I get it to do that?”  Well, the answer is very simple, and it’s easily taken care of with one line of CSS code.

In your CSS code, simply assign the following:

html body {margin:0px; padding:0px}

That’s it. Seriously. By default, most (I hesitate to say all) browsers have a built in 10px or so padding around the edge of the window. By setting your html and body to have no margin or padding, it effectively overwrites the browser default values and uses yours.

While you’re at it, you might also be wondering how you can center your main container in the browser window, instead of having it left-justified.  This too is easy to implement with one snippet of CSS.  Let’s go ahead and assume that your main div container has the ID “container”. Your CSS code to center the div “container” will be:

#container {margin: 0 auto; width:960px;}

Notice that in this example, you need to fix your width to a certain value so the container knows not to take up 100%. The margin setting “0 auto” tells the container to have a margin of 0 (zero) pixels on top and bottom, with auto margins on the left and right.

So there you have it. Two basic CSS rules to make your page go all the way up to the edge of the browser window, and to center your main container in the window.

Until next time, happy coding!

One Response to this post:

Leave a Comment