SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member ChipOManiac's Avatar
    Join Date
    Jun 2012
    Location
    Talpittiya, Sri Lanka
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Using a wrapper/container div: Why?

    I've usually seen that most websites use a general div called "wrapper" or "container".

    What I just usually do is style the body element instead since it's more semantic.

    Is there a valid reason why this is used? Is it a browser compatibility issue?

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    8 Thread(s)
    Hi there,

    One reason would be to enable more sophisticated CSS styling.
    Some browsers don't support certain properties on the body, for example width and [samp]max-width[samp], so a container div is used which can be centered, have borders applied to it or whatever.
    Also, if you want to place content outside of your container div (copyright notice, for example), then this is no problem. You cannot, however, place content outside of the body.

    A second reason would be for convenience when specifying elements in CSS and JavaScript, as you can refer to an element's parent, without having to add an id or class to each child.

    E.g.
    Code CSS:
    div#container h1 {...}
    div#container p {...}
    Or:
    Code JavaScript:
    var kids = document.getElementById("container ").childNodes;

    This question is also discussed here: http://stackoverflow.com/questions/3...er-div-in-html and here: http://www.webteacher.ws/2005/02/01/494/

    HTH

  3. #3
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    If you use a wrapper div, you can have one background for the body and something different for the wrapper.
    You can use negative margins to push things out over the edge of the wrapper.
    Add shadows etc to the wrapper to make it sit "above" the body and its background.

    Basically it's just more flexible when you add a wrapper div.

  4. #4
    SitePoint Member ChipOManiac's Avatar
    Join Date
    Jun 2012
    Location
    Talpittiya, Sri Lanka
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi there,

    One reason would be to enable more sophisticated CSS styling.
    Some browsers don't support certain properties on the body, for example width and [samp]max-width[samp], so a container div is used which can be centered, have borders applied to it or whatever.
    That makes sense, I just wish browsers like that would pick up to things like this. Thanks for your reply.



    Quote Originally Posted by Dr John View Post
    If you use a wrapper div, you can have one background for the body and something different for the wrapper.
    You can use negative margins to push things out over the edge of the wrapper.
    Add shadows etc to the wrapper to make it sit "above" the body and its background.

    Basically it's just more flexible when you add a wrapper div.
    I see, but I've been able to do the same by just styling the html element (although I'm not sure if this causes a cross browser issue, could never check for IE). Thanks for your reply anyway.

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,600
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    If I didn't use a wrapper element then how would I style the part of the body that is outside the wrapper?

    The body is the entire web page - the wrapper is the part of the page that contains the actual content. With today's wide screens if someone opens their browser full screen web pages would become unusable if they didn't limit their width (about 30 or 35 em is the maximum width for a readable column so you'd need lots of columns of data to actually fill the width of a widescreen monitor with usable content.Far easier to use a wrapper around your content that allows a background to display on either side once the viewport is wider than would allow the content to be readable if it filled the entire width.


    Semantically the body and the page content are two different things and so you should have a tag for each. <body> and <div id="wrapper"> are the simplest versions to represent each of them.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  6. #6
    SitePoint Guru dojo's Avatar
    Join Date
    Feb 2005
    Location
    Romania
    Posts
    899
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I use the 'container' to make it have a max-width, align in the center of the page and then I can create the separate styling for various types of devices (am coding responsive now). You need such things to be able to style said div and also other elements inside. And then other divs inside it and so on


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •