Sunday, August 16, 2009

How to center a div in a browser window like firefox

It has been a while since my last web development project. The antonov star search made me skip a few small projects. But the good thing is that we've acquired a sort of big project from a milk company. It's huge coz we have to maintain the site for a year.

I was assigned to code the design template. Everything went well but then someone from the company requested that the site should always be in the center of the browser. I was kinda stumped with the request since I'm not really the css guy in my old team. I'm Mr. Widget - the guy who's doing all the purely decorative stuff in a site. But anyway, going back to the code, I tried experimenting a few settings but this is the one that worked in the css:
#main {
width: 600px;
margin-left: auto;
margin-right:auto;
}

So yeah. I spent like 30 minutes experimenting on the css only to find out that it's all about the margins. :) By the way, "main" is the name of the biggest div. It's like the parent table in the layout. So there. Another good no know...This is a very simple layout since it's just a two-column layout. If you wanna use it. Feel free to copy paste. lol And there's only one div for the content so most probably I'll just add another one when the need arises. :)

Here's what my nested divs look like:
<div id="main">

<div id="top">
</div>
<div id="left">
<div id="navigation">

</div>
<div id="mainpic">
</div>
</div>

<div id="right">
<div id="content1">
</div>
<div id="footer">
</div>
</div>

</div>

So far so good. We're almost done with the project and it looks cool! I haven't tested it in Internet Explorer though. :)

0 comments:

Post a Comment

Twitter Delicious Facebook Digg Stumbleupon Favorites More