CSS offers the ability to shorten your code in a few instances to make it more tidy and easy to maintain. Here’s an example of how to shorten your margin and padding rules.

This rule:

.mydiv {
padding-top: 12px;
padding-right: 3px;
padding-bottom: 6px;
padding-left: 9px;
}

Is exactly the same as this rule using shorthand:

.mydiv {
padding: 12px 3px 6px 9px;
}

Notice two things: First, there is no punctuation delimiter between the values just a space. Second, the order you place the values matters. Imagine a clock, starting at the top (12:00) is your first value followed by 3:00, 6:00 and 9:00. Each of these positions are how you determine where the padding/margin gets applied.

Relative position is one of the most understood of all the CSS positions. Once you understand how it is supposed to be rendered it can be a powerful design tool for your more complex layouts.

To understand relative positioning first we need to take a look at static positioning. By default elements are positioned statically. Static elements flow normally within the document one after another based on the order of your markup. Here is a visual example of a statically positioned div with the id of “mydiv”.

Here’s the code:

#mydiv {
position:static;
}

Static position will ignore any top, bottom, left or right declarations. Normally you would never need to write a rule like this since static is the default value unless you are trying to override another rule.

Relative position.
Relative position is “relative” to the space the element would normally occupy. The element can be moved in the layout by using top, bottom, left or right.

Here’s the code:

#mydiv {
position:relative;
top: 20px;
left:-75px;
}

This rule tells “mydiv” to move -75 pixels from it’s left position, and 20 pixels from it’s top position.

Notice that the area where the div was positioned statically still maintains it’s space within the layout. Hope that clears things up!

I’ve been designing a new CSS framework the last few months and thought I’d share my thoughts on how I set it up to be both useful and flexible. I’ve tried to take best practices from some of the

reset.css

This negates most of the CSS rules written by the default.css built into the browsers. Gets everything back to a level playing field so your new rules are more predictable.

layout.css

All the containers, columns, navigation etc. This is the largest sheet and contains everything that doesn’t fit in any of the other sheets.

colors.css

This is where all your colors live. It helps with consistent usage. If you are responsible for maintaining brand this is the best place to control that effort. You can also use this sheet to define a high contrast style as well. Just add another sheet and conditionally point to it in this one’s place.

forms.css

Forms are always a bear to design. This is where I keep all the form elements and different form layouts.

type.css

All typography is in this one. H1, H2, H3 etc. are defined here. Font-family.

iehacks.css

Where I make IE act like a modern browser.

debug.css

During development I like to tun on certain styles to help me. (ex. div {background-color: pink;}
) This helps me see all the divs on a page so I can work on floats etc. I use a JavaScript to toggle this sheet on and off.