John Ibanez

Old is the New ‘New‘
Jeffrey Zeldman on Redesigned.

AsideShop Plugin for wordpress doesn’t work anymore. I can’t believe that I still had time to hard-code my site to support Asides. I hope it works fine on all browsers. I’ve checked it on IE and FF. Works just fine.

A lot of people ask me how I center DIV elements in my work. I actually have 2 techniques which works fine and validates at W3.org.

1st is Centering a div through Auto-Margins:

Lets say you placed a div named ‘page’ inside your body tag to serve as a container for your content and you want to place it in the center of the page. Using Margins and having it set automatic horizontally will usually do the trick. (refer to the code below).

#page {
<strong>margin: 30px auto;</strong>
width: 500px;
}

Code Explanation : The 1st value in the margin field ’30px’ sets the length of the margins at the top and bottom of the ‘page’ div to 30 pixels. The second value in the margin field ‘auto’ sets the length of the margins at the left and right side of the ‘page’ div automatically which also centers it because it sets the margins equally for both left and right margins.

2nd is Centering a div through a Negative Margin Method:

Using the same HTML Structure, we can also place the ‘page’ div in the center by using the negative margin method.

#page {
position: absolute;
left: 50%;
width: 500px;
margin-left: -250px;
}

Code Explanation : What is obviously done here is that we push the ‘page’ div at half (or 50%) of the screen starting from the left side. And then pull back half of the total width of the div (which is 250px) . That should center the div perfectly.

Though there are tons of ways of centering a div, I choose to stick to these because it leaves the markup clean.

Are you a wordpress user? Do you end up kissing your CSS mods Goodbye whenever your theme author releases new updates for your theme? If you say yes to both, you might find this article very useful.

(more…)