Grow your CSS skills. Land your dream job.

Just trying to understand CSS divs

  • # April 6, 2008 at 1:14 pm

    I am visiting this site:
    http://matthewjamestaylor.com/blog/ulti … pixels.htm

    And there are colored outlines for each DIV under this heading
    "The nested div structure

    I’ve colour coded each div so it’s easy to see:"

    Is it just me or are the names of the DIVs very screwy, left is call right, right is called left??
    Also why are there so many DIVs actign as wraps for the left and right col divs?

    I just get confused when I see something like this, any help would be appreciated. Thanks

    box
    # April 6, 2008 at 4:26 pm

    It does look like he’s over done in on the divs. If there’s not going to be content in any of the three ‘positioning’ divs – then there’s no need to have them. The lowest ‘content’ div’s position can be arrived at with a bit of padding.

    The best way to layout your html is to do so economically. Try not to use anything that isn’t there purely for content. Once you have your html structured semantically and economically – then you can begin the fun task of layout with CSS. Divs are overused generally and it is bad practice to apply any element that is unnecessary. Occasionally this is forgivable when a ‘spare’ div (of other element) is used to clear a float or something similar). Any block-level element may be controlled in the same way as a div – therefore, for example, an unordered list doesn’t need to be wrapped in a div (as is a common practice), but may be styled just as effectively with its ul selector. This is also true of h1 (and all h tags), p tags, blockquote etc. Try to refrain from wrapping everything in Div’s unless you’re grouping content – i.e for a multi-column layout where there are a number of element-types in each column.

    The link you provided is probably fine for developing an understanding of nested divs, but I wouldn’t use it as a reference to a well structured web page.

    dag
    # April 6, 2008 at 6:24 pm

    I agree with box: The code must be as economical as possible.
    Generally must never use tags unnecessary.

    # April 6, 2008 at 6:31 pm

    Yeah I can see how that would be confusing. That’s what we’ve began calling "divitus" where people just put way too many useless divs into the markup. In that image, I see no real use for the colmask, colwrap, or col1wrap. Sometimes there is a reason to wrap a div inside another div, but they present no compelling reason for it there.

    It’s extra confusing how they call the div on the left "right" and the div on the right "left". That’s the sting of using descriptive text like that for class names, it comes to bite you. Much better to call it "main-content" and "sidebar", so whether that sidebar is on the left or right, it’s name still makes sense.

    # April 6, 2008 at 7:20 pm

    So I’m not that crazy afterall, whew!

    Thanks yall, I greatly appreciate it. and Chris, you rock dude!

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".