ansaurus

Question

is wrapper DIV a violation of content-style separation?

Answer 1

+1 A:

In any case "wrapper" is a bad choice for an id. In general, wrapping DIV's are not used for simple alignment tasks alone (use a SPAN otherwise) and do provide/determine a structure for your web page. Therefore, in my opinion, wrapping DIV's do not violate the content-presentation separation.

Anzeo 2010-10-19 06:54:41

Answer 2

A:

That div provides a way of structuring the document, so it is used for presentation. No violation at all. The more obvious way of violating content-presentation separation, is to include CSS in presentation.

Interesting link:

http://www.bjornenki.com/blog/separating-presentation-from-content-css

netadictos 2010-10-19 07:12:19

Answer 3

+1 A:

You can use something like:

<div id="content_container">
<div id="section_container">
<h2></h2>
<p>stuff</p>
</div>
</div>

And I believe this gives correct structure to your document. Though it would probably be nicer to have elements for this (like <content> and <section>), because id can only be meaning full for us not for parsing the document. div have no actual meaning it's just a container for block elements that's all and so I believe it cannot violate content-presentation separation.

Having said all that you could also use <body> element to center your content (it is an element after all), but I'm not 100% sure if it work in old IE (old meaning IE 6).

Nux 2010-10-19 07:13:17

Answer 4

A:

It can do, though sometimes the div provides structure. We have to accept that CSS is not yet perfect and that compromises have to be made in our HTML. In particular in this case, when all browsers support the CSS3 pseudo-element ::outside ( http://www.w3.org/TR/css3-content/#wrapping ) I think that many wrapper divs will become unnecessary.

Alohci 2010-10-19 08:01:50

Do you know if it's possible, using ::outside or an alternative, to generate anonymous wrappers for dt/dd pairs (or label/input pairs)? Those are very common use cases in need of a solution.

Bobby Jack 2010-10-19 12:04:25

@Bobby Jack - Actually I'm not sure. Reading the page I linked to, for simple name/value pairs it might be possible to do a "move-to" on the dt element to a ::before pseudo-element of the dd, then an ::outside pseudo-element of the dd might wrap both. Since I don't know of any browser that current supports any of this, I've no way of testing it.

Alohci 2010-10-19 13:09:27

Answer 5

+3 A:

Kind of. But it doesn’t matter.

Principles like “separate content and presentation” are helpful because they help you achieve your goals, by making code easier to change. They’re not like nuclear safety regulations — contradicting them won’t risk anyone dying, so “violation” is a bit of a strong word.

Sticking in a wrapper <div> to work around the limitations in CSS is fine. It doesn’t hurt the code. If you can avoid it, great. But don’t worry if you can’t. There are bigger fish to fry.

Paul D. Waite 2010-10-19 10:03:26

What you say is pragmatic and realistic, but I take issue with the "it doesn't matter" sentiment. It DOES matter, just not as much as other things :)

Bobby Jack 2010-10-19 13:13:28

@Bobby: I’d say it doesn’t matter *appreciably*, and if it doesn’t matter appreciably, it doesn’t matter.

Paul D. Waite 2010-10-19 15:47:02

Answer 6

+1 A:

If your DIV's ID has an exact equivalent in HTML5 (div id="nav", for example) then it's structural and, therefore, perfectly acceptable. div id="wrapper" is probably the equivalent of div id="article" or div id="section", so it's probably OK, although poorly-named, as Anzeo suggests.

Bobby Jack 2010-10-19 12:06:41

Answer 7

A:

My personal opinion is wrappers have a very useful and necessary purpose although I dont use the term wrapper. Consider a div that has a set width of 200px but we want a border without effecting the width of the div we would need this solution:

div#posts {
    width: 200px;
    height: 200px;
}
div#posts-inner {
    padding: 10px;
    border: 1px solid #ccc;
}

<div id="posts"><div id="posts-inner">
    <p>My Posts</p>
</div></div>

If you markup your CSS effectively you can avoid examples of less useful css declarations like:

#posts {
    border: 1px solid #ccc;
}

If you put your CSS elements into context rather than assuming what its class represents

div#posts-wrapper {
    border: 1px solid #ccc;
}

This would improve the separation of design and content elements in your css.

woodscreative 2010-10-19 12:36:00

Answer 8

A:

It's best to think of this in terms of semantics. You should be using the right tag for the right part of your part. HTML5 is a big step in this direction allowing the use of more tags such as 'article', 'nav' and 'section', which are give more semantic meaning than div.

However, div was a godsend for designers because it gave you a simple, block-level element with little semantic meaning other than to provide a 'divider', or 'section' of a page (much like the 'section' tag in HTML5). Not having anything else, it is perfectly acceptable to use in even a semantic sense because we didn't have anything else that had the same meaning and provided the same default characteristics.

It certainly doesn't violate the separation of style and content because it provides CSS with a block to do something with. You couldn't create most layouts on the web without using it AND keeping to a semantic structure!

Alex 2010-10-19 15:59:13

Answer 9

A:

It's common to see a "DIV id='wrapper'" to wrap around elements inside so the body can be centered. In pure HTML, it would never be used because it's meaningless and it's used ONLY for CSS.

Is a containing wall not a structural piece of a building? I would argue that a containing wall is in fact one of the most common structural pieces you can find in elements.

So doesn't using DIV id=wrapper actually violate one of the fundamentals of content-presentation separation?

No, A containing element (or a <div id="wrapper">) is just as much the structure of a document as a <header> <nav> <body> or <article>.

Even if it weren't considered structural, the goal of unobtrusive design is to separate as much as reasonably possible structure (HTML) from style (CSS) and behavior (JavaScript). In the end, unobtrusive design is really just a set of best-practice guidelines to follow to create more maintainable code.

Breaking the rules wont invalidate your code, and often times breaking the rules can create better, more maintainable code. As you design more and more, you will quickly learn that you sometimes have to go against the grain and ignore best-practices.

Moses 2010-10-19 17:24:43

ansaurus

tags:

views:

answers:

is wrapper DIV a violation of content-style separation?

related questions