Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Layout Techniques Display Modes Block vs. Inline Elements

Posted by 2btrzt9ior
2btrzt9ior
15,232 Points

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

nvcxnvkldsjaklfds
PLUS
nvcxnvkldsjaklfds
Courses Plus Student 5,041 Points
nvcxnvkldsjaklfds
nvcxnvkldsjaklfds
Courses Plus Student 5,041 Points

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.

2btrzt9ior
2btrzt9ior
15,232 Points

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.