CSS: Center div Layout

There are many popular web layouts out there in practice but these days I've noticed many people tend to use the centered layout. The reason, as far as I can think, is the variable amount of screens available in the market. How? Well its very simple. When you develop a page, you don't develop it for a particular sized screen, so this doesn't actually allow you to use absolute positioning freely. So what do you do if you want to make a layout with fixed width placed at the center? Ya you can fix the left of the division to some arbitrary pixels that you think will be sufficient to put you division in the center but what if the screen size changes? In small screens your division will look like right alinged and in larger screens it will move towards left. So.. how do we do it? Well actually its pretty easy, lol.. here's how you can do it very simply.
So to do it, what we require the most is a div in our page, lol.. and some CSS code. I am assuming that you know tits-bits of HTML and CSS, though it ain't gonna change a thing. Moreover, the CSS itself is very easy to understand. Here is the CSS for our page which you need to put in your style tag or the seperate CSS file, if you are using one.

CSS

#centerDiv {
   margin: 0 auto;
   width: 80%; /* change this as required*/
  }

Now all we need is the HTML code to put this CSS in. But before that lets know what we did (you can skip this if you know what we did.. lol). Firstly I declared a selector id for our division named centerDiv. This will be used by our division so that we can identify which division we are to format. Inside that I've defineded the margin and the width of the division. What about the height? The division will automatically adjust the height according to the content. Still if you want some fixed height, which is a rare case, you can assign it using the height attribute which works similar to the width. Now lets make our HTML. Notice I'm only going to give you what's to be placed inside the body here.

HTML

<div id="centerDiv"></div>

Yup, that's all! Put all your content inside this division and this will give you exactly what you want. Below is the full code for whatever we did. You can directly use it as an HTML file.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/css">
    #centerDiv { margin: 0 auto;
 width: 80%;
    }
    </sript>
  </head>
  <body>
 <div id="centerDiv">Hey! div is in the center! ;)</div>
  </body>
 </html>

And if you're feeling too lazy to test it yourself, see it in action here.
Hope this helps, Happy coding!

CSS

Sunday, 30 September 2012

Center div Layout

No comments:

Post a Comment