What is the correct way to do a CSS Wrapper

Question

I have heard a lot of my friends talk about using wrappers in CSS to center the  main  part of a website   Is this the best way to accomplish this  What is best practice  Are there other ways

User · Answer

Centering content has so many avenues that it can't really be explored in a single answer. If you would like to explore them, CSS Zen Garden is an enjoyable-if-old resource exploring the many, many ways to layout content in a way even old browsers will tolerate.

The correct way, if you don't have any mitigating requirements, is to just apply margin: auto to the sides, and a width. If your page has no content that needs to go outside those margins, just apply it to the body:

body {
  padding: 0;
  margin: 15px auto;
  width: 500px;
}

https://jsfiddle.net/b9chris/62wgq8nk/

So here we've got a 500px wide set of content centered at all* sizes. The padding 0 is to deal with some browsers that like to apply some default padding and throw us off a bit. In the example I do wrap the content in an article tag to be nice to Screen Readers, Pocket, etc so for example the blind can jump past the nav you likely have (which should be in nav) and straight to the content.

I say all* because below 500px this will mess up - we're not being Responsive. To get Responsive, you could just use Bootstrap etc, but building it yourself you use a Media Query like:

body {
  padding: 0;

  margin: 15px;
  @media (min-width: 500px) {
    margin: 15px auto;
    width: 500px;
  }
}

Note that this is SCSS/SASS syntax - if you're using plain CSS, it's inverted:

body {
  padding: 0;  
  margin: 15px;
}

@media (min-width: 500px) {
  body {
    margin: 15px auto;
    width: 500px;
  }
}

https://jsfiddle.net/b9chris/62wgq8nk/6/

It's common however to want to center just one chunk of a page, so let's apply this to only the article tag in a final example.

body {
  padding: 0;
  margin: 0;
}

nav {
  width: 100%;
  box-sizing: border-box;
  padding: 15px;
}

article {
  margin: 15px;
  @media (min-width: 500px) {
    margin: 15px auto;
    width: 500px;
  }
}

https://jsfiddle.net/b9chris/62wgq8nk/17/

Note that this final example also uses CSS Flexbox in the nav, which is also one of the newer ways you could center things. So, that's fun.

But, there are special circumstances where you need to use other approaches to center content, and each of those is probably worth its own question (many of them already asked and answered here on this site).

User · Answer

Are there other ways    Negative margins were also used for horizontal  and vertical   centering but there are quite a few drawbacks when you resize the window browser  no window slider  the content can t be seen anymore if the size of the window browser is too small  No surprise as it uses absolute positioning  a beast never completely tamed   Example  http   bluerobot com web css center2 html  So that was only FYI as you asked for it  margin  0 auto  is a better solution

User · Answer

lt div class  wrapper  gt test test test lt  div gt    wrapper      width 100px      height 100px      margin 0 auto      Check working example at http   jsfiddle net 8wpYV

User · Answer

Most basic example  live example here   CSS       wrapper           width  500px          margin  0 auto         HTML       lt body gt           lt div id  quot wrapper quot  gt              Piece of text inside a 500px width div centered on the page          lt  div gt       lt  body gt   How the principle works  Create your wrapper and assign it a certain width  Then apply an automatic horizontal margin to it by using margin  0 auto  or margin-left  auto  margin-right  auto   The automatic margins make sure your element is centered

User · Answer

Fit the body to the edges of the screen                          body            margin 0           padding 0         header        background black       width 100       header        height 200px     nav        width 100        background lightseagreen      nav        padding 0       margin 0      nav a        padding 10px       font-family tahoma       font-size 12pt       color white                         Centered wrapper  all other content divs will go inside this and will never exceed the width of 960px                            wrapper            width 960px           max-width 100            margin 0 auto            lt  -------- Start HTML ---------- gt        lt body gt    lt header gt        lt div id  header  class  wrapper  gt        lt  div gt    lt  header gt    lt nav gt         lt div id  nav  class  wrapper  gt         lt  div gt    lt  nav gt          lt  body gt

User · Answer

The easiest way is to have a  wrapper  div element with a width set  and a left and right margin of auto   Sample markup    lt  doctype html gt   lt html gt   lt head gt       lt title gt  lt  title gt       lt style type  text css  gt           wrapper   width  960px  margin  0 auto  background-color   cccccc            body   margin  0  padding  0        lt  style gt   lt  head gt   lt body gt       lt div class  wrapper  gt          your content         lt  div gt   lt  body gt   lt  html gt

User · Answer

a  wrapper  is just a term for some element that encapsulates all other visual elements on the page   The body tag seems to fit the bill  but you would be at the mercy of the browser to determine what displays beneath that if you adjust the max-width   Instead  we use div because it acts as a simple container that does not break   the main  header  footer  and section tags in HTML5 are just div elements named appropriately   It seems that there could  or should  be a wrapper tag because of this trend  but you may use whichever method of wrapping you find most suitable for your situation   through classes  ids and css  you can use a span tag in a very similar way   There are a lot of HTML element tags that we do not use often or possibly even know about   Doing some research would show you what can be done with pure HTML

User · Answer

You don t need a wrapper  just use the body as the wrapper   CSS   body       margin 0 auto      width 200px      HTML            lt body gt       lt p gt some content lt  p gt   lt body gt

User · Answer

The best way to do it depends on your specific use-case   However  if we speak for the general best practices for implementing a CSS Wrapper  here is my proposal  introduce an additional  lt div gt  element with the following class          1  Center the content  Yes  that s a bit opinionated     2  Use  max-width  instead  width     3  Add padding on the sides       wrapper       margin-right  auto     1        margin-left   auto     1         max-width  960px     2         padding-right  10px     3        padding-left   10px     3            for those of you  who want to understand why  here are the 4 big reasons I see   1  Use max-width instead width  In the answer currently accepted Aron says width  I disagree and I propose max-width instead   Setting the width of a block-level element will prevent it from stretching out to the edges of its container  Therefore  the Wrapper element will take up the specified width  The problem occurs when the browser window is smaller than the width of the element  The browser then adds a horizontal scrollbar to the page   Using max-width instead  in this situation  will improve the browser s handling of small windows  This is important when making a site usable on small devices  Here   s a good example showcasing the problem    x000D   x000D      x000D     The problem with this one occurs x000D     when the browser window is smaller than 960px  x000D     The browser then adds a horizontal scrollbar to the page  x000D      x000D   width   x000D      width  960px  x000D      margin-left  auto  x000D      margin-right  auto  x000D      border  3px solid  73AD21  x000D    x000D   x000D      x000D     Using max-width instead  in this situation  x000D     will improve the browser s handling of small windows  x000D     This is important when making a site usable on small devices  x000D      x000D   max-width   x000D      max-width  960px  x000D      margin-left  auto  x000D      margin-right  auto  x000D      border  3px solid  73AD21  x000D    x000D   x000D      x000D     Credits for the tip  W3Schools x000D     https   www w3schools com css css max-width asp x000D      x000D   lt div class  width  gt This div element has width  960px  lt  div gt  x000D   lt br   gt  x000D   x000D   lt div class  max-width  gt This div element has max-width  960px  lt  div gt  x000D   x000D   x000D    So in terms of Responsiveness  is seems like max-width is the better choice -    2  Add Padding on the Sides  I   ve seen a lot of developers still forget one edge case  Let   s say we have a Wrapper with max-width set to 980px  The edge case appears when the user   s device screen width is exactly 980px  The content then will exactly glue to the edges of the screen with not any breathing space left   Generally  we   d want to have a bit of padding on the sides  That   s why if I need to implement a Wrapper with a total width of 980px  I   d do it like so    wrapper      max-width  960px      20px smaller  to fit the paddings on the sides        padding-right  10px     padding-left   10px              omitted for brevity        Therefore  that   s why adding padding-left and padding-right to your Wrapper might be a good idea  especially on mobile     3  Use a  lt div gt  Instead of a  lt section gt   By definition  the Wrapper has no semantic meaning  It simply holds all visual elements and content on the page  It   s just a generic container  Therefore  in terms of semantics    lt div gt  is the best choice   One might wonder if maybe a  lt section gt  element could fit this purpose  However  here   s what the W3C spec says      The  element is not a generic container element  When an element is needed only for styling purposes or as a convenience for scripting  authors are encouraged to use the div element instead  A general rule is that the section element is appropriate only if the element s contents would be listed explicitly in the document s outline    The  lt section gt  element carries it   s own semantics  It represents a thematic grouping of content  The theme of each section should be identified  typically by including a heading  h1-h6 element  as a child of the section element      Examples of sections would be chapters  the various tabbed pages in a tabbed dialog box  or the numbered sections of a thesis  A Web site s home page could be split into sections for an introduction  news items  and contact information    It might not seem very obvious at first sight  but yes  The plain old  lt div gt  fits best for a Wrapper     4  Using the  lt body gt  Tag vs  Using an Additional  lt div gt   Here s a related question  Yes  there are some instances where you could simply use the  lt body gt  element as a wrapper  However  I wouldn   t recommend you to do so  simply due to flexibility and resilience to changes   Here s an use-case that illustrates a possible issue  Imagine if on a later stage of the project you need to enforce a footer to  stick  to the end of the document  bottom of the viewport when the document is short   Even if you can use the most modern way to do it - with Flexbox  I guess you need an additional Wrapper  lt div gt    I would conclude it is still best practice to have an additional  lt div gt  for implementing a CSS Wrapper  This way if spec requirements change later on you don t have to add the Wrapper later and deal with moving the styles around a lot  After all  we re only talking about 1 extra DOM element

[html] What is the correct way to do a CSS Wrapper?

Examples related to html

Examples related to css