Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Layout Techniques Display Modes Block vs. Inline Elements

body vs. wrapper div - "a little more control"

At the beginning of this 'Block vs. Inline Elements' video, Guil styles a page first by adding rules to the body and then by adding rules to a wrapper div, and shows how both methods lead to the same result. He then states a couple times that he prefers to use a wrapper div because it allows for more control, but he doesn't really elaborate on this.

Doing some research it seems that this is a fairly old either/or preference, but can anyone give any concrete examples where using a wrapper div might provide more control? I know it was used in the past because body styling was wonky in older versions of IE, but are there any specific reasons that don't involve legacy browser support?

Thanks!

1 Answer

Isaac Skaw Good question. I have ask this question myself many times.

It is more about control. Lets talk about body tag. I use call body as tag. Because it is a container and have semantic meaning than special effect. We know that by default body tag takes up the whole width and height of the browser screen.

If you do not know that please try this codes in your computer

<!DOCTYPE html>
<html>
    <head>
        <title>Anchor Element- HTML</title>
        <link rel="stylesheet" type="text/css" href="test1.css">
    </head>
    <body>      

    </body>
</html>

I name my css file as test1.css.

body{
    background-color: blue;
}

When you use div inside a body, you will have more control over content inside div.

Example: In case you want full background of blue color, inside that you like to have container with 50% of total width of the screenand background color of green, then inside that you like to have header, section, apart and footer.

It is amazing to have div to strcuture HTML document. When you style in CSS, you will find it more useful to have div.

When you use div inside a body, you will have more control over content inside div.

See, that's what Guil said, but he didn't provide a concrete example.

Example: In case you want full background of blue color, inside that you like to have container with 50% of total width of the screenand background color of green, then inside that you like to have header, section, apart and footer.

This can just as easily be done without a wapper div, like so:

html { background-color: blue; }
body {width: 50%; background-color: green; }

To my knowledge, the only reason this wasn't always done is because styling the html and body tags had strange effects in older browsers. That isn't really an issue anymore.

I appreciate the response, but it didn't really answer my question. I'm looking for specific, real-world examples of why a wrapper div provides more control than just styling the body element.

P.S. I apologize in advance if my markdown syntax is incorrect, this is my first attempt at using it.