Adobe Community: To <div> or not to <div>

Currently Being Moderated

1. osgood_,

Mar 11, 2013 12:52 AM in reply to TimSPQR

Report

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><h1>header</h1></div>

</div>

</div>

</div>

When you can do this:

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

</div>

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

|

Mark as:

Currently Being Moderated

2. Ben Pleysier,

Mar 11, 2013 2:19 AM in reply to osgood_

Report

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

3. MurraySummers,

Mar 11, 2013 5:22 AM in reply to TimSPQR

Report

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

4. TimSPQR,

Mar 11, 2013 6:51 AM in reply to osgood_

Report

@osgood_ - Ok, good to know. So for for headings and pictures, I don't have to enclose them in a <div>. Your upper example looks like stuff I've done, and I'll start leaving out <div>s based on your lower example. I didn't realize that you could control a picture size "alone".

Thanks very much!

@Ben - good to know about converting and image to a block element - I'll try it today and see how it works.

@MurraySummers - Yes, I'm stuck with absolute positioning. The pages I'm making are very complex - there are a series of four "constants" -

An upper left <div> with a background image (100x100px).

An upper rectangular <div> (100x100%) into which I put a variable title.

A left hand <div> (with links and a background image) that serves as a standard series of links.

There is then a <div> below the upper rectangle that is a <table> (3 col, 2 row) with data.

That leaves one large <div> below and to the right of all that stuff - that I put in a whole series of information - usually in tables (it's a data-rich environment)

I thank you all for your answers!

|

Mark as:

Currently Being Moderated

5. MurraySummers,

Mar 11, 2013 7:07 AM in reply to TimSPQR

Report

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

6. TimSPQR,

Mar 11, 2013 7:21 AM in reply to MurraySummers

Report

Ok, I'll play with it some more and see what I can do.

An example now is that I'm trying to put a table in the "big <div>" and it is "invisible" in "design" and when I hit "Live" it magically appears.

|

Mark as:

Currently Being Moderated

7. MurraySummers,

Mar 11, 2013 8:32 AM in reply to TimSPQR

Report

Let's see your code, please.

|

Mark as:

Currently Being Moderated

8. TimSPQR,

Mar 11, 2013 12:48 PM in reply to MurraySummers

Report

I'll post something VERY simple below

|

Mark as:

Currently Being Moderated

9. Nancy O.,

Mar 11, 2013 11:05 AM in reply to TimSPQR

Report

Basic grid. No APDivs required:

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

How to Develop with CSS? (A Must Read)

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

Nancy O.

|

Mark as:

Currently Being Moderated

10. TimSPQR,

Mar 11, 2013 11:35 AM in reply to Nancy O.

Report

There are 244 <div>s on the displayed Adobe page.

There are 34 <divs>s on the page HowToDevelopWithCSS.

Now I'm thoroughly confused.

It looks like <div>s are commonly used by the experts.

I guess the answer is "Yes, to <div>"

|

Mark as:

Currently Being Moderated

11. Nancy O.,

Mar 11, 2013 11:39 AM in reply to TimSPQR

Report

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

12. TimSPQR,

Mar 11, 2013 12:52 PM in reply to Nancy O.

Report

Here is something as simple as they come:

3 boxes that I want arranged like this:

maroonlightbluelightbluelightbluelightbluelightbluelightbluelightbluel ightbluelightbluelightbluelightbluelightbluelightbluelightblue

dkblue

Here's the code - without absolute positioning, I can't get them lined up the way I want.

<!doctype html>

<html>

<head>

<style>

.topleftbox {

float: left;

width: 100px;

height: 100px;

background-color: maroon;}

.topbar {

float:left;

height: 100px;

width: 100%;

background-color: gray;}

.leftbar {

float:left;

height: 100%;

width: 100px;

background-color: navy;}

.subcontainer {

float:left;

height: 100%;

width: 100%;

background-color: #D2FFFF;}

</style>

</head>

<body>

</body>

</html>

|

Mark as:

Currently Being Moderated

13. Nancy O.,

Mar 11, 2013 12:55 PM in reply to TimSPQR

Report

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:

Currently Being Moderated

14. TimSPQR,

Mar 11, 2013 2:03 PM in reply to Nancy O.

Report

I think I figured it out.

To use "boxes" outside of the normal "stack order" you must use absolute or relative positioning.

So I made three "boxes", all using "float: left" for positioning.

The heights are 100px (the "header") 100% (the "large container) and 30px for the "footer".

In the "header" I inserted a smaller box -- 100px -- and floated it to the left.

In the "large container" I put a tall column 100%x100px and floated it to the left.

So I get the EXACT layout I want, and didn't have to use "relative" or "absolute positioning.

To me, the take home message is:

Stack your "big picture stuff" using "float:left/right"

then insert your smaller items inside the "big picture stuff"

using "float:left/right".

So with this, I was able to construct a page EXACTLY the way I wanted it,

and did not use ANY "position:".

I still used all <div>s for the boxes, but I can work on that later.

Thanks very much to all of you for all of your help!

Mantra:

No "position"

Use "float"

No <div>s

No "position"

Use "float"

No <div>s

No "position"

Use "float"

No <div>s

No "position"

Use "float"

No <div>s

No "position"

Use "float"

No <div>s

No "position"

Use "float"

No <div>s

No "position"

Use "float"

No <div>s

No "position"

Use "float"

No <div>s

|

Mark as:

Dreamweaver

To <div> or not to <div>

Mar 10, 2013 9:24 PM

More Like This

Bookmarked By (0)

Answers + Points = Status