Why should I use a container div in HTML?

Question

I have noticed a common technique is to place a generic container div in the root of the body tag:

  
    ...
  
  <         


        

Answer 1

I know this is an old question, but i faced this issue myself redesigning a website. Troy Dalmasso got me thinking. He makes a good point. So, i started to see if i could get it working without a container div.

I could when i set the width of the body. In my case to 960px.

This is the css i use:

html {
  text-align:center;
}

body {
  margin: 0 auto;
  width: 960px;
}

This nicely centers the inline-blocks which also have a fixed width.

Hope this is of use to anyone.

Answer 2

Certain browsers (<cough> Internet Explorer) don't support certain properties on the body, notably width and max-width.

Answer 3

The container div, and sometimes content div, are almost always used to allow for more sophisticated CSS styling. The body tag is special in some ways. Browsers don't treat it like a normal div; its position and dimensions are tied to the browser window.

But a container div is just a div and you can style it with margins and borders. You can give it a fixed width, and you can center it with margin-left: auto; margin-right: auto.

Plus, content, like a copyright notice for example, can go on the outside of the container div, but it can't go on the outside of the body, allowing for content on the outside of a border.

Answer 4

Most of the browser are taking web page size by default. So, sometime page will not display same in different browser. So, by using user can change for specific HTML element. For example, user can add margin, size, width, height etc of specific HTML tag.

Answer 5

Well,

The container div is very good to have, because if You want the site centered, You just can't do it just with body or html... But You can, with divs. Why container? Its usually used, just because the code itselve has to be clean and readable. So that is container... It contains all website, in case You want to mess with it around :)

Good luck

Answer 6

This is one of the biggest bad habits perpetrated by front end coders.

All the answers above me are wrong. The body does take a width, margins, borders, etc and should act as your initial container. The html element should act as your background "canvas" as it was intended. In dozens of sites I've done I've only had to use a container div once.

I'd be willing to be that these same coders using container divs are also littering their markup with divs inside of divs--everywhere else.

Dont' do it. Use divs sparingly and aim for lean markup.

-=-=- UPDATE - Not sure what's wrong with SO because I can edit this answer from 5 years ago but I can't reply to the comments as it says I need 50 Rep before I can do so. Accordingly, I'll add my answer to the replies it received here. -=-=-

I just found this, years after my answer, and see that there are some follow up replies. And, surely you jest?

The installed placeholder site you found for my domain, which I never claimed was my markup or styling, or even mentioned in my post, was very clearly a basic CMS install with not one word of content (it said as much on the homepage). That was not my markup and styling. That was the Silverstripe default template. And I take no credit for it. It is, though, perhaps one of only two examples I can think of that would necessitate a container div.

Example 1: A generic template designed to accommodate unknowns. In this case you were seeing a default CMS template that had divs inside of divs inside of divs.

The horror.

Example 2: A three column layout to get the footer to clear properly (I think this was probably the scenario I had that needed a container div, hard to remember because that was years ago.)

I did just build (not even finished yet) a theme for my domain and started loading content. For this easily achieved example of semantic markup, click the link.

http://www.bitbeyond.com

Frankly, I'm baffled that people think you actually need a container div and start with one before ever even trying just a body. The body, as I heard it explained once by one of the original authors of the CSS spec, was intended as the "initial container".

Markup should be added as needed, not because thats just the way you've seen it done.