bum-4w
Last Updated: February 25, 2016
·
1.428K
· passcod

Using body as a container

Have you ever done this?

<html>
  <head><!-- ... --></head>
  <body>
    <div id="container">
      <!-- everything else -->
    </div>
  </body>
</html>

I know I have. Frequently. But truth is, you don't need that div#container. Consider how your CSS might look with the above markup:

body {
  background: #C00710;
  /* other backgroundy properties */
}

#container {
  background: white;
  margin: 0 auto;
  /* other containery properties */
}

You're missing out on something awesome, here: the html root element is a parent of everything else. So you can easily do this:

<html>
  <head><!-- ... --></head>
  <body>
    <!-- everything else -->
  </body>
</html>

And modify your CSS just a tiny bit:

html {
  background: #B4D455;
  /* backgroundy */
}

body {
  background: white;
  margin: 0 auto;
  /* containery */
}

Clean!

1 Response
Add your response

10003

The bad part of this is IE7. If HTML and BODY have different sizes, IE7 goes crazy and a lot of hasLayout bugs appears.

over 1 year ago ·