Is it possible to overuse <div>?

Associate
Joined
4 Dec 2003
Posts
640
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:

Code:
<div class="block">
  <div class="sectitle">
    Section Title
  </div>
  <div class="subtitle">
    Sub Title
  </div>
  <div class="imgdescarea">
    <img src="images/blah.jpg" height="150" width="100" alt="picture" />
    <div class="imgdesc">
      Description text etc etc...
   </div>
</div>

Is there such a thing as <div> overkill and am I going to end up there, or is this perfectly acceptable?
 

BaJ

BaJ

Associate
Joined
19 Oct 2002
Posts
782
Location
The middle bit
Yes, that's a case of Divitis!

Code:
<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>
</div>

... is a better start.
 
Associate
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 ;)
 
Soldato
Joined
3 Aug 2005
Posts
4,534
Location
UK
BaJ said:
Yes, that's a case of Divitis!

Code:
<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>
</div>

... is a better start.
^ Sex. :)

Although assigning the height and width of an image inline is a bit... 90's?
 
Permabanned
Joined
21 Apr 2004
Posts
13,312
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.
 
Man of Honour
Joined
31 Jan 2004
Posts
16,335
Location
Plymouth
Al Vallario said:
^ Sex. :)

Although assigning the height and width of an image inline is a bit... 90's?
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 :)
 
Soldato
Joined
18 Oct 2002
Posts
5,464
Location
London Town
Beansprout said:
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 :)
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.
 
Associate
OP
Joined
4 Dec 2003
Posts
640
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?
 
Soldato
Joined
23 Oct 2003
Posts
8,899
Location
Hampshire, UK
Augmented said:
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.


tis a good point. And if the image doesnt load, at least the page layout is right.
 
Soldato
Joined
30 Sep 2003
Posts
10,916
Location
London
Augmented said:
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.

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.
 
Back
Top Bottom