On width

Width causes two problems. First, people can't figure why an element won't accept width. Second, people can't figure out why their poor "boxes" are bigger than they expect.

Inline elements

The first problem is usually because the developer is trying to apply width to something that can't take it. For example, adding the "width" property to a span, without something more, will do nothing. Span is an inline element--or it is at least treated as such. Since inline elements don't understand width (it really doesn't make much sense), the property gets ignored. The fix is simple: make it not an inline element.

There are two ways to easy ways to make something not an inline element. The first is to change the display property (eg. display: block; or display: inline-block; the latter of which doesn't work in many browsers). The second way is to float an element. By adding float: left;, an inline element is now a box. Problem solved.

The meaning of width...

The second problem is something a bit "trickier". The typical situation looks like this:

div#something {
    width: 100px;
    padding: 5px;
    border: 1px solid #000;
    background-image: url(perfectly-100px-image.gif);
}

They are then shocked to find that their painstakingly precise 100 pixel image doesn't fit perfectly in their box. They then complain that CSS sucks.

Well, the problem is simple. The calculation for "box width" is done by adding the values for 1) width, 2) horizontal padding, and 3) horizontal borders. The problem is most certainly because most people would want to understand "width" to be "box width" and not "content width".

You see, the actual meaning of the "width" property is "content width". It sets the space that a block may use to show its content (inline or otherwise). In the code above, the content contained by #something will have a width of no more than 100px, without doing something else. The overall box, however, will be 100px (content width) + 10px (left & right padding) + 2px (left & right borders), for a total of 112px.

So, to get the "appropriate" behavior, and assuming that the borders are supposed to be on the outside of the image, the following code would work:

div#something {
    width: 90px;
    padding: 5px;
    border: 1px solid #000;
    background-image: url(perfectly-100px-image.gif);
}

10 CSS tips for the new

This is my attempt to save you some time

1. Do not worry about height: 100%

   There are plenty of ways to get this to work, but this is not something that you should concern yourself at first. Trust me, it's simple, but it's not "easy". It's not "easy" because it involves aspects of an HTML document that I'm sure you're not prepared for.

2. You don't need to position everything

   Sounds like common sense to those of us that have done CSS development for a number of years, but it's easily missed for the new. The feeling is usually because the first CSS examples you'll find use crazy things like position:absolute; and float: left;. The truth of the matter is that those techniques are used in the minority of design elements. More frequently than not, you can just leave your poor element alone. If you learn nothing else from this: try nothing first.

3. Make sure that you're not fighting browser defaults

   Some browsers have funky browser defaults for properties likes margins, paddings, line-heights, font-sizes, and font-weights. When in doubt, try things like zeroing out the margins and paddings. Frequently, people will suggest the selector: * { margin: 0; padding: 0; }. It's true, this will clear all those defaults. I suggest that you use it for debugging and be more specific about your killing of properties, like: h1, h2, h3, h4, h5, h6, form { margin: 0; padding: 0; }

4. Validation doesn't mean correct

   The fact that your page validates does not mean that it is correct for the purpose you intend. This is just like how "Stop!" is a valid sentence, but it doesn't mean that the message will convey "proceed in an orderly fashion in the following direction" (it, in fact, would mean just the opposite).

5. There is such a thing as too many divs

   Divs are simply another html element. Doing one-to-one replacement of table elements for divs is probably pointless. There is a whole world of html elements that you should become familiar with. Use them. They're your friends. Divs are just one choice that people often use to divide up their content into smaller pieces.

6. Tables are not evil

   Tables are only evil for layout. Tables have their place among all the other HTML elements. You probably have a good use for a table if you can figure out where to place the following table elements: caption, thead, tbody, tfoot, and th. Also, there is the "summary" table attribute that you should be able to use. A good rule of thumb is that if you have something that would be appropriate in MS Excel, it's probably ok for a table (I realize that people abuse Excel, but that's another issue).

7. Work smarter, not harder with CSS

   Under this rule, there are a number of subrules: if there isn't a point to adding a CSS property, don't add it; if you're not sure why you're adding a CSS property, don't add; and if you feel like you've added the same property in lots of places, figure out how to add it in only one place (ie. this happens for font, color, background-color, font-size, and width properties all the time).

8. After you have a design, start with a blank page of content

   Start with an unstyled, vanilla page of representative content first. It is sort of the inverse of table development. After you've designed your site in a graphics program, create a vanilla page of content. Include your headers, your navigation, a sample of the content, and your footer. Then start adding your html markup. Then start adding your CSS. It works out much better. You can, of course, always go back and tweak your HTML with additional elements, as needed, but you just find that you end up with fewer.

9. Start your CSS by working from the top down

   Creating your CSS in an orderly fashion will help you get started. I find that the top down works the best. By top down, I mean the literal top of your HTML source, which should somewhat correspond to the top of your page's design anyway. Generally, your header is probably at the top of your design and the top of your source.

10. Use Google™, first

    You probably won't learn everything without doing a bit of searching. I've found that one of the best search queries is the following: CSS [whatever it is I'm searching for]. (without the []) By that, I mean, if I'm trying to figure out how to remove that damn extra space below my h1 elements, I search for: CSS h1 extra space below. Notice that you'll get results that might not be perfect, but you don't even need to know that the problem is margins. You can also be more specific if your problem is in one browser only by modifying your search to the following: CSS IE [my problem]. (no []). For example, the following: CSS IE extra 3 pixels to the right of a float.

That took awhile to write. I hope that helps. Enjoy!