6 Mar, 2010
in css
by Austin Hallock
With CSS, one of the big things you’ll need to do is position your elements. You may have used something like <table width=’100′ height=’100′> in the past, problem with that is it’s not valid. I’m trying to teach people valid code 
If you don’t understand anything in this article, either leave a comment with a question, or refer to the previous post (the one before my apartment vid). This ended up being pretty lengthy, so grab a glass of water and get comfortable 
The best element to use for positioning/padding/margins etc is the <div> tag. Next easiest is the <p>, and tags like <span>’s and <a>’s can be moved around and have the height changed with a bit of extra work.
We’ll start with what you do for <div>’s and <p>’s:
Width and Height:
Pretty self-explanatory — You can use pixels, percentages and it looks like centimeters (never used that)
CSS:
.pixels
{
width: 400px;
height: 400px;
}
.percentages
{
width: 70%;
height: 50%; /*Though % heights don't always work as expected */
}
Examples
<div style='width: 400px; height: 300px;'>Test</div>
Tips
In general, most people have a resolution of at least 1024px by 768px. This means you probably don’t want a width greater than about 950px.
Padding
Padding is just that, it’s extra space that pads the outside of your element, meaning more space between the edge and your content. You can use “padding:” or “padding-left”, “padding-top”, etc.
CSS
.all_around
{
padding: 20px;
}
.left_right
{
padding: 20px 0;
}
.top_right
{
padding: 20px 20px 0 0;
}
.left_pad
{
padding-left: 20px;
}
Examples
<style type='text/css'>
.mydiv
{
padding: 2px 10px;
}
</style>
<div class='mydiv'>Test</div>
Tips
If you just enter one value, ie the all_around class above, it will pad all four sides.
If you specify two numbers like the left_right class, it will pad the top and bottom with the first number, and left and right with the second.
If you specify all four numbers like the top_right class, it will put the padding in clockwise order. So top, right, bottom, left.
Margin
Margin is very similar to padding. The difference is margin is the amount of space
between each element, while padding is extra space
inside the element. This makes a big difference when you start adding background colors and borders. Like padding, you can use “margin”, “margin-right”, “margin-bottom”, etc
CSS
.all_around
{
margin: 20px;
}
.left_right
{
margin: 20px 0;
}
.top_right
{
margin: 20px 20px 0 0;
}
.left_pad
{
margin-left: 20px;
}
Examples
<style type='text/css'>
.mydiv
{
margin: 10px 0;
}
</style>
<div class='mydiv'>Test</div>
Tips
The order of top, right, left, bottom is the same for this. And again, use padding when you have a background color for your element and you want some space so the text isn’t smushed up against the edge, use margin when you want space between elements.
Centering an element
If you want to center an element in the page, most people probably use <center>. Again, not really valid. So what I do is something like this:
<style type='text/css'>
.container
{
width: 800px;
margin: 0 auto;
}
</style>
<div class='container'>Whatever</div>
Aligning your element in the exact center of the page (what’s above just centers horizontally), you want to do something like this or use some javascript.
Just a random tip that I can’t really write a full blog post for, there’s an order to which elements can be inside which. Basically, don’t put a <div>, <p>, <h1> (h2, h3 etc) inside of a <span> or <a>
Well that was a lot of text, hopefully you’ll find some use out of some of it. Funny thing about me doing these tutorials/posts on CSS is CSS was the last thing I became fluent in, learned HTML -> PHP -> Javascript -> CSS.
Next up is more advanced positioning/padding for stuff like links and spans.
Ever wanted your page that has an ugly URL like:
