Monday, September 13, 2004

Quick Centering

There's nothing difficult about centering, what is oft overlooked, however, is that you can apply centering to the body element. This example by Simple Bits: CSS Centering 101 is a classic example of when you don't need more than the body element.

In the example, they're centering a fixed width layout. So they give the container element a width. My question is, why do that?

If we know that the content will ALWAYS be 700px wide, let's give the width to the body element. If we need to give our page a background, we still have the HTML element. Thus our code is further simplified:

<html>
  <!-- skipping head, but that's important too -->
  <body>

  </body>
</html>

In addition, the CSS stays exactly the same, swapping html and body for the body and container:

html { text-align: center; /* IE5 hack */ }
body { text-align: left; /* IE5 hack */
       width: 700px;
       margin: 0 auto;
}

That's all she wrote!

You can do lots of fun things with the html and body elements that should suffice for most designs.

posted by Mike @ 10:42 AM   2 comments

2 Comments:

At 5:14 PM, Blogger Dante said...

Interesting point. But will older browsers like this?
I suggest taking a look at PPK's viewport experiments (http://www.quirksmode.org/viewport/intro.html) to see which browsers may have trouble with this.

 
At 12:55 AM, Blogger Endovelico said...

Hi.
First time on your blog. I was searching the web for a script that would dynamically generate content on my blog. the way search engines generate results by pages instead of just pouring out one billion entries in a single page...
You seem to know a lot about CSS and i'm not even confortable with the basics. It's starting to be a hassle opening my blog. It's got too many pictures and i just hate the archiving (nobody ever clicks in the archives). Can you tell me if there's a way to do it?
Hope so.
Thanks anyway.

 

Post a Comment

<< Home