Is it useful to #container, #Wrapper in every CSS layout?

Is it useful to add whole code in #container, #Wrapper in every CSS layout? Can't we make layout without this extra div ? What are pros and cons to use this extra div?

Is it 开发者_如何学Gogood practice ? Is it useful for any type of design/layout? Is it semantically correct?

---

Is it useful to add whole code in #container, #Wrapper in every CSS layout?

It would not be needed in every layout unless every layout was the same, and then only if they require a wrapper/container.

Can't we make layout without this extra div ?

Yes, you can sometimes dispense with the extra wrapper div.

What are pros and cons to use this extra div?

It totally depends on your layout. Often with a fixed width centered design, a wrapper makes the most sense. You can also style the body tag, but then overlays and other elements might look different or not totally fill the screen depending on their implementation.

Is it good practice?

Yes, but only if the layout requires it.

Is it useful for any type of design/layout?

It is normally useful when you need to do a fixed width, centered layout. Not sure of other uses where it is helpful.

Is it semantically correct?

Not really as the body is really a perfectly good container or wrapper so adding another one is redundant. However, it is a necessary evil in many designs depending on browser support needed or the layout that is needed. Go ahead and use it without concern if it makes sense for your project and layout.

---

Putting a container div around the whole page can be useful in certain situations, e.g. if you want to center everything, you can just put margin: 0 auto; on the container div and be done. That being said, it is certainly not required nor useful for every type of layout.

As to semantical correctness, sure, having a div as the only direct child of body is absolutely okay. A div tag does not have any semantical meaning in and on itself, the very reason it was introduced was to be able to do layout without misusing semantic tags.

---

If you have <div id="container"><div id="Wrapper">STUFF</div></div>, then surely you can simplify. Maybe try changing id to class, as in <div class="container"><div class="Wrapper">, then in your style change #container to .container, and #Wrapper to .Wrapper.

If it still works, you can remove the inner div by combining the style. If that's too hard (too much style to edit), you can simply join classes in a single div: <div class="container Wrapper">STUFF</div>.