Skip navigation
Currently Being Moderated

To <div> or not to <div>

Mar 10, 2013 9:24 PM

Tags: #div #positioning

Ok, another newbie question.

 

I'm doing much better with understanding positioning, and can, more or less, get exactly what I want.

One thing I've found is that if I:

a. take an "element" (table, text, picture, <div>, etc) and put it in a <div>

b. adjust the size of the <div> to the "element",

c. adjust the class of the <div> in the <style> section

it is much easier to move things around on a page.

 

A little survey:

1. Is this the way you do it?

2. Are there particular elements you ALWAYS put in a <div>?

3. Are there certain elements you NEVER put in a <div>?

4. Are there other ways to "control" elements and their placement?

 

Again, I thank you very much for your time.

 
Replies
  • Currently Being Moderated
    Mar 11, 2013 12:52 AM   in reply to TimSPQR

    I just control the placement of elements by using margin or padding css and very very ocassionally absolute positioning.

     

    Its not necessary to always use a <div> to control the placement of an element. I wouldn't insert a heading tag or the content or an image in their own <divs> like this example just to position them:

     

    <div id="leftCol">

    <div><h1>header</h1></div><!-- close h1 -->

    <div id="content">

    <p>Some text goes here</p>

    </div><!-- close content -->

    <div id="leftColimage">

    <img src="images/myImage.jpg" width="200" height="200" alt="" />

    </div><!-- close leftColimage -->

    </div><!-- close leftCol -->

     

    When you can do this:

     

    <div id="leftCol">

    <h1>header</h1></div>

    <p>Some text goes here</p>

    <img src="images/myImage.jpg" width="200" height="200" alt="" />

    </div><!-- close leftCol -->

     

    Elements can be moved into position using css without the necessity to have a <div> wrapped around them.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 11, 2013 2:19 AM   in reply to osgood_

    An HTML element is everything from the start tag to the end tag.

     

    With that knowledge, a division (DIV) is an element as is HTML and BODY with HEAD being a special type of element.

     

    All elements can be styled using CSS, block elements can be made inline, inline elements can be made into block elements.

     

    Hence, if you want to centre an image (image is an inline element) within its container (another element), we change it into a block element and add automatic margins as in

    img {display:block; margin:auto;}

    I can hear you say, "But an IMG has no end tag. This is true, HR, BR and IMG elements (amongst others), are empty elements and do not have ending tags in HTML. In XHTML, HR, BR and IMG elements must be properly closed using the forward slash as in

    <br />

    Sorry, just realised that I went off on a tangent. Just ignore my ramblings.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 11, 2013 5:22 AM   in reply to TimSPQR

    When you say "move things around on the page" it sounds like you are still stuck with absolute positioning as a way of building a page layout.  I hope this is not the case. Absolute positioning is not a general tool for page layout....

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 11, 2013 7:07 AM   in reply to TimSPQR

    I want to state clearly that I have not yet seen a page that would require the use of absolute positioning. Your page would not be an exception to that rule. Using absolute positioning for text containers is an invitation to disaster - yours included.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 11, 2013 8:32 AM   in reply to TimSPQR

    Let's see your code, please.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 11, 2013 11:05 AM   in reply to TimSPQR

    Basic grid.  No APDivs required:  

    http://alt-web.com/TEMPLATES/HTML5Layout.html  (View source to see the code)

    HTML5-3col.jpg

     

    How to Develop with CSS? (A Must Read)

    http://phrogz.net/css/HowToDevelopWithCSS.html

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 11, 2013 11:39 AM   in reply to TimSPQR

    Divs and styled selectors (h1, h2, h3, p ,li, etc...) are all fine.

    Positioning is not fine.  Use margins & floats to align elements.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 11, 2013 12:55 PM   in reply to TimSPQR

    Start with a 2 or 3-column CSS Layout.

    Go to File > New > Blank page > HTML > Layout.  Choose one from the right panel and hit Create.

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points