Common CSS problems
Here is a short list of the most common problems I see people having with CSS. This is by no means a complete list, just what I see in my day to day work.
Padding and Margins: Padding pads the inside of an element. Margins define space outside the element. These are easy to confuse, and easier to mess up. One of the most often problems people have with both of these attribute is this: By default, these attributes are not zero. If you want them to be zero, make them so.
Nesting: A DIV is just a container. It is easy and often beneficial to nest DIVs one inside another. Each can contribute attributes to the overall layout or style of a page, making attractive and complex layouts much, much easier. Don’t try to do to much with a single DIV, it might be easier to get what you want by nesting a couple of DIVs and applying different properties to each.
Borders: You’d think that borders would be straightforward, but a lot of people have trouble with them. The confusing part is that a problem with the border, which should appear between the margin and the padding of a container, is often just a symptom of the real problem. If you have a border issue, make sure that your DIVs are nesting properly, and that your margins and padding are correct. Those two issues will solve a lot of border problems.
Positioning and Floats: Used in the layout of a page, both positioning and floats can control the positioning of objects, DIVs, images, etc. If left to their own devices, objects on your webpage would flow sequentially down the page in the order they are listed in the HTML. These properties allow you to change that. The positioning property contains the attributes: Static, Relative, Absolute, Fixed, and Inherit. The Static attribute allows an object to fit into the flow a page normally, with the flow of the content. The Relative attribute bases its’ position on the flow of content, but allows you to move an object “relative” to that normal position. In contrast to those, the Absolute attribute allows you to place the object outside of the flow of content. The Fixed attribute (not widely supported at this time) takes that one step further and “fixes” the position of the object independent of both flow and scrolling. The Inherit attribute does just that, it tells the object to inherit it’s position attribute from it’s parent container. The float property also allows you to take an object out of the general flow, but in a subtle fashion. With float you can move an object left or right until it hits the edge of the containing object. Float is more subtle that position in that, while it is removed from the flow, text will flow around it. This makes it ideal for placing things like sidebars, photos, and small text boxes that you want independent of the content flow, but not conflicting with it either. - This is obviously just a rough outline of these complex properties, but more information is available at BrainJar.com: CSS Positioning.
The other problem areas I see I have covered before in other writing. They are Selectors and Sequence. Taking the time to learn a basic understanding of these two last concepts will go a long way towards mastering CSS.