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    lt html gt     lt head gt             lt  head gt     lt body gt       lt div id  container  gt                 lt  div gt     lt  body gt   lt  html gt    Is there a valid reason for doing this  Why can t the css just reference the body tag

User · Answer

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

User · Answer

THis method allows you to have more flexibility of styling your entire content   Effectivly creating two containers that you can style   THe HTML Body tag which serves as your background  and the div with an id of 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

User · Answer

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

User · Answer

THis method allows you to have more flexibility of styling your entire content   Effectivly creating two containers that you can style   THe HTML Body tag which serves as your background  and the div with an id of 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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

THis method allows you to have more flexibility of styling your entire content   Effectivly creating two containers that you can style   THe HTML Body tag which serves as your background  and the div with an id of 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

User · Answer

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

User · Answer

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

User · Answer

Certain browsers   lt cough gt  Internet Explorer  don t support certain properties on the body  notably width and max-width

User · Answer

THis method allows you to have more flexibility of styling your entire content   Effectivly creating two containers that you can style   THe HTML Body tag which serves as your background  and the div with an id of 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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Certain browsers   lt cough gt  Internet Explorer  don t support certain properties on the body  notably width and max-width

[html] Why should I use a container div in HTML?

Examples related to html

Examples related to css