Reputation: 819

Why should I use a container div in HTML?

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

<html>
  <head>
    ...
  </head>
  <body>
    <div id="container">
      ...
    </div>
  </body>
</html>

Is there a valid reason for doing this? Why can't the CSS just reference the body tag?

Upvotes: 81

Answers (11)

Michael Albers

Reputation: 123

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 960 pixels.

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.

Upvotes: 4

Isaac Pak

Reputation: 4951

I've never heard of issues using a div class="container" markup. But I have heard of issues using body as a top level container. See this article. Stick with the tried and true; who knows what browsers will do in the future.

Upvotes: -1

provance

Reputation: 927

Forget the container. It's just a habit from the old, very old days.

Everything you can do using a div—you can also do it on a body tag.

Upvotes: -1

Max_pain

Reputation: 1

Most of the browsers are taking the web page size by default.

So, sometimes the page will not display same in different browser. So, by using <div></div>, the user can change for a specific HTML element. For example, the user can add margin, size, width, height, etc. of a specific HTML tag.

Upvotes: -2

David Stančík

Reputation: 350

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? It’s usually used, just because the code itself has to be clean and readable. So that is the container... It contains all of the website, in case you want to mess around with it :)

Upvotes: 0

kits

Reputation: 1

div tags are used to style the webpage so that it look visually appealing for the users or audience of the website. Using container-div in HTML will make the website look more professional and attractive and therefore more people will want to explore your page.

Upvotes: 0

Troy Dalmasso

Reputation: 61

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

All the previous answers 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.

Don’t do it. Use divs sparingly and aim for lean markup.

I later 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 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 that’s just the way you've seen it done.

Upvotes: 0

Mitchel Sellers

Reputation: 63126

This method allows you to have more flexibility of styling your entire content. Effectively creating two containers that you can style. The HTML body tag which serves as your background, and the div with an id of the container which contains your content.

This then allows you to position your content within the page, while styling a background or other effects without issue. Think of it as a "Frame" for the content.

Upvotes: 14

Quentin

Reputation: 943510

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

Upvotes: 2

Jonathan Tran

Reputation: 15276

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.

Upvotes: 71

da5id

Reputation: 9136

The most common reasons for me are so that:

The layout can have a fixed width (yes, I know, I do a lot of work for designers who love fixed widths), and
So the layout can be centered by applying text-align: center to the body and then margin: auto to the left and right of the container div.

Upvotes: 2

Why should I use a container div in HTML?

Answers (11)

Related Questions