CSS Beginner Mistakes: “Divitus”, Absolute Positioning

Published by Chris Coyier

There is an article over at Search-This that points out a couple of beginner mistakes that are pretty interesting. Here are some highlights and some of our own:

  • Absolute positioning. - One of the first feelings of power you get when learning CSS is learning that you can control the position and size of any element on the page with what are essentially X,Y coordinates and dimensions. Of course, absolute positioning has it's uses, but generally not for actual page content. Absolutely positioned objects ignore all other objects and limit your ability to stay flexible with content.
  • Setting the height (when you don't need to) - It's lust for control. It's tempting to force the height of an object so it "looks how you want it", but this can really mess up the content inside that object. In general, don't set heights, let your objects grow to fit what is inside and control your positioning with margins, paddings, and floats. Look what happens on the box below, you can make the height just right with your font settings, but then if the user increases that, the content breaks out of the box and looks broken:

    [MISSING IMAGE, Sorry]

  • "Divitius" - Divs are generic page dividers meant to break up page content into meaningful sections. CSS makes use of this quite a bit, which beginners really notice and latch on to. Then once they see that you can control all kinds of things by giving divs classes and ids, they just start using divs for everything:
    <div id="header">
       <div class="bold">Heading</div>
    <div id="subheader">
       <div class="bold">Sub Heading</div>
    <div>This is the content</div>

    This is unnecessary and in fact, somewhat harmful, since search engines look at HTML to understand your page content better. <h1> tags designate a "header" and thus are given more weight by a search robot if used correctly.

    <h2>Sub Heading</h2>
    <p>This is the content</p>

    HTML gives you tags to describe your content. Use them. It's good for everybody.

  • "Classitus" - Similar to divitus, classitus is when beginners apply classes to things that really don't need it. applying class="link" to an <a> tag is totally pointless, just style the <a> tag. If you need a link on your page with a different style than the other links, using a class could be appropriate, but apply a class name that is more descriptive like "footer_link" or "bold_link". But remember that if you have five links in your footer it makes much more sense to style #footer a in your CSS than to give each link a class in your HTML and muddy up the code.