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!
Written by Félix Saparelli
Related protips
1 Response
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
·
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Css
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#