1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Is it possible to overuse <div>?

Discussion in 'HTML, Graphics & Programming' started by lightbulb, 24 Jul 2006.

  1. lightbulb


    Joined: 4 Dec 2003

    Posts: 623

    I'm planning on making a general site for myself and am using CSS properly for the first time. Before I had only used two or three styles in the header of the page but now I'm going all out CSS lol.

    What I've done is placed a <div> around almost everything I think I might want to customise at some point eg:

    <div class="block">
      <div class="sectitle">
        Section Title
      <div class="subtitle">
        Sub Title
      <div class="imgdescarea">
        <img src="images/blah.jpg" height="150" width="100" alt="picture" />
        <div class="imgdesc">
          Description text etc etc...
    Is there such a thing as <div> overkill and am I going to end up there, or is this perfectly acceptable?
  2. BaJ


    Joined: 19 Oct 2002

    Posts: 781

    Location: The middle bit

    Yes, that's a case of Divitis!

    <div class="block">
      <h1>Section Title</h1>
      <h2>Sub Title</h2>
      <img src="images/blah.jpg" height="150" width="100" alt="picture" />
      <p>class="imgdesc">Description text etc etc...</p>
    ... is a better start.
  3. nav...


    Joined: 2 Apr 2004

    Posts: 674

    Location: Melbourne

    Only use div's when you need to divide up a page into different parts.

    A good rule of thumb is that a page should make sense if you disable the stylesheet.

    your code wouldn't much sense about what each part of the page infers, whereas Baj's example would.

    Don't worry though, I don't know of anybody that's started learning CSS without contracting a mild case of divitus.

    Best to nip it in the bud early though ;)
  4. Al Vallario


    Joined: 3 Aug 2005

    Posts: 4,534

    Location: UK

    ^ Sex. :)

    Although assigning the height and width of an image inline is a bit... 90's?
  5. iCraig


    Joined: 21 Apr 2004

    Posts: 13,314

    Location: Wolverhampton

    DIV soup is a pain, the key is to not class a DIV as a wrapper for anything, but as more of a way of grouping elements together. Most text can be controlled better with header, span and paragraph elements.
  6. nav...


    Joined: 2 Apr 2004

    Posts: 674

    Location: Melbourne

    A div is a way for dividing pages, clue is in the name :D
  7. Beansprout

    Man of Honour

    Joined: 31 Jan 2004

    Posts: 16,319

    Location: Plymouth

    Using height/width to force the size is 90s, but if you're giving the actual dimensions that lets browsers layout the page while the image loads :)
  8. Augmented


    Joined: 18 Oct 2002

    Posts: 5,464

    Location: London Town

    Yep, it saves the browser having to repaint the canvas once the image has been fully downloaded and it can start calculating the space required to render it in the layout. More importantly it stops content 'jump'. Nothing worse than reading a sentence for it to jump

    300 pixels down the page when an overweight floated image file loads several paragraphs above :D.
  9. lightbulb


    Joined: 4 Dec 2003

    Posts: 623

    ta for the replies all
    as has been said I have got into a habit of specifying img height and width when I know them to prevent content jumping around and so stuff loads quicker due to the placeholder being there before the picture.

    As for the divs, say I wanted to set the background colour or mess with borders for a grouping of items...that would warrant a <div> and the items inside could use the <p> or a <span> for their individual formatting or background styles and so on, is that right? <span> being inline and <div> being a block element?
  10. D4VE


    Joined: 23 Oct 2003

    Posts: 8,899

    Location: Hampshire, UK

    tis a good point. And if the image doesnt load, at least the page layout is right.
  11. Mattus


    Joined: 30 Sep 2003

    Posts: 10,916

    Location: London

    This really annoys me! I don't know why browsers don't just maintain the current position on the page when this happens - let the content load out of sight and push the rest of the page up rather than the current position down.