St. on IT: Super Simple Layout

I'd like to show you a little css-trickery thing I use on pages where you have a super simple content, like a documentation or a demo page, and all you want is just to make it look kinda decent without bothering with additional HTML scaffolding.

Say you have the following HTML page

<html>
  <body>
    <h1>The Main Title</h1>
    
    <h2>Chapter Title</h2>
    <p>
      bla bla bla
    </p>
    .......
    <div id="footer">Copyright ...</div>
  </body>
</html>

It is super-simple, you've got an H1 for the page head title, you've got a bunch of H2 and P tags with the content and kind of a footer at the end.

And say, you want your page to have some sort of header/footer areas and a bit of paddings on the left and on there right.

Here is how you can do that with pure CSS, without bothering with additional tags

html, body {
  margin: 0;
  padding: 0;
}
html {
  padding-top: 8em;
  padding-bottom: 4em;
  background: gray; /* header and footer background */
}
body {
  padding: 1em 10em;
  padding-bottom: 5em;
  background: white; /* the main area background */
}
h1 {
  position: absolute;
  top: -.6em;
  font-size: 4em;
  color: white;
  margin: 0;
  padding: 0;
}
div#footer {
  position: absolute;
  bottom: 1.5em;
  color: white;
}

As you can see the trick is very simple, you use top and bottom paddings on the HTML tag to create the header and the footer, and left/right paddings on the BODY tag to create, well left and right paddings. After that just move the header and footer elements in their place with absolute positioning and you're done!

That's the whole trick. An example is over here
Enjoy!

St. on IT

Thursday, March 3, 2011

Super Simple Layout

No comments: