Mick Redman: snipplr

Monday, 25 October 2010

Centre a DIV, interpret font sizes and snipplr

I have been subscribed to http://snipplr.com recently. It's very good. It's a sort of social networking site for coders. Below are a couple examples of things I got from the site this morning contained in the same page. The first technique is how to centre a DIV inside another DIV. Very useful.
The second technique is to set the font size within the body CSS body reference to 62.5%. The result is that when you apply font-size:1em later, this translates to 10px. font-size1.2em is equal to 12px etc. Very useful too.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Centre a DIV inside a DIV</title>
<style type="text/css">
body
{
font-family:Sans-serif;
font-size:62.5%;
}
#outer
{
margin:0 auto;
width:800px;
background:#000000;
}
#inner
{
   width:50%;
   margin:auto;
   background:#FF0000;
}
p
{
  font-size:1.2em;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner"><p>Hello World!</p></div>
</div>
</body>
</html>