Which approach will create less cross browser problems? see example image.

Question

Is thee any benefit to wrap Main content and Context div in a content div?

Column can be increased. like 1. Main content 2. left sidebar 3. right sidebar.

My main question is is there any benefit to wrap all in another div?

Answer 1

There can be. So the answer is... it depends.

Generally I will wrap adjacent divs like this, particularly if there is a semantic reason to do so. But even if there isn't there's next to no overhead. Often you will find it much less awkward if you have this kind of nesting. For example, it would make it much easier if you wanted to float one or both child elements.

In this case you could argue your document consists of:

• Header
• Content
• Footer

On this page there are two columns to the content but on other pages there might not be. Other pages might be a single column or have five. Whatever the case, having that content div wrapping all the columns will make a general layout (for all cases) much easier.

Is it necessary? Absolutely not. You could make it work either way. Both approaches are fine and work.

Answer 2

Use it if you intend to "group" the positions of main content and context together, so that you for example can position them relative from each other without influencing the other elements such as header and footer negatively. In semantic/SEO terms that extra div has in fact no impact.

Answer 3

If the sidebar and main-content divs are always together, I think the second option is smarter, because you can use the id for the outer-content wrapper for both css and javascript to manipulate the entire area at once.

The only reason to NOT do it, other than a strong minimalist attitude (which I tend to have) is if you want each area of the page to be truly modular and independent. Experiments like csszengarden are founded on such a principle. This philosophy, in a nutshell, thinks that divs and other elements are chunks of information that should have the ability to be arranged in any way a designer wants (putting your header at the bottom, for instances, or swapping the main-content with the sidebar div, etc). By using a wrapper div, you are forced to use techniques like fixed positioning to break that inner div out of the wrapper (maybe to put it in the upper left corner, for instance).

But aside from that, semantically the two chunks seem to go together, so wrapping them is not a hack. Look forward to the HTML 5 element <aside> which is explicitly meant for side notes like the one in your example.