Perfectly Centered Div

So this post is for all of you that need to center a div in the middle of the page. This can be a some what hard task if you really care about how your design works. You can use an absolute div and just set left and right percentages but its hard to say that it will render out the same in everyones browser. This is due to the screen size, everyones screen is different sizes and so there browser windows are different sizes. So we need to make sure that our div is centered horizontally for everyone that views our page.
In order to do this we need two div’s, well there are many different ways of doing this but the technique I’m going to show you uses two div’s. The first div is our frame, this div stretches all the way from the left side to the right side of our browser window. Then we add a div inside our frame that has auto margins making it perfectly centered.

Okay lets get started with our CSS:

.windowFrame {
position: absolute;
top: 100px; /* Space between the top of the browser and the div */
left: 0px;
right: 0px;
}
.window {
width: 800px; /* Whatever width size you need. */
height: 532px; /* Whatever height size you need. */
background: url('backing.png') repeat; /* Background image of our window */
padding:10px;
border: #888888 1px solid;
margin: 0 auto; /* This is what centers the div. */
z-index: 9; /* Just incase your have other content */
}

And now the HTML:

<div class="windowFrame"><!-- Our main frame -->
<div class="window" id="window"><img src="images/1_full.jpg" /></div>
<!--Div above is our actual window with our content-->
</div>

Thanks it, thats how easy it is. I have setup a demo here (View Demo) so you can check it out and play around with it. If you find any bugs or issues with this let me know.
Happy Designing

Pure Css Shadows

Little details like adding one pixel shadows to a DIV element makes your design look more clean and professional. In this post I will show you how to add pure CSS shadows to your DIV’s.
So lets get started with the basic HTML structure

<div class="shadow">
     <div class="main">
          Content Here
      </div>
<div>

You can see from the code above that we are using two DIV’s to get the effect. First we open the shadow DIV. Then we place the content DIV inside the shadow DIV and close the shadow DIV. Now this is just two DIV so lets add some CSS to make this complete.

.shadow {
	border-width: 1px;
	border-color: #EEEEEE;
	border-style: solid;
		}

.main {
	background-color: #FFFFFF;
	border-width: 1px;
	border-color: #CCCCCC;
	border-style: solid;
		}

Now you can see that its just basic CSS, first we add a gray border to the content then we add a lighter border to the shadow DIV. You can use any colors just set the border color that you want for the “main” DIV then mix the color just a little lighter for the shadow border.
Thanks it, that’s how easy it is to make simple Pure CSS Shadows without having to deal with images.

Examples: