[!] [=title "Week 4: The Div Tag"] [=content-]

Finally, another tag! I haven't introduced this one yet, because it's frankly very boring without CSS - but now that we know some basic CSS, it's time we get fancy with it, and for that we need `<div> </div>`!

Divs are an extremely boring tag. They do not apply any style to their contents by default and mostly don't have any unexpected behavior (although you can't have a `div` inside a `p` for Weird Reasons™). If you just put a div tag in your document, you won't see it at all!

This boringness makes divs extremely convenient for styling and layout control. For instance, if you want a huge magenta block in the middle of the screen, a div is the right way to go:

    >style<
    .huge_block {
    	padding: 200px;
    	background-color: magenta;
    }
    >/style<
    >div class="huge_block"<>/div<

Because by default a div has no content, has no color, has no extra padding, etc, this code is very simple. And the result is thus:

Pretty terrible and unnecessary, but usefully so!

If your screen is wider than 800px, you may notice this div looks wider than it is tall, even though `padding` adds the same amount to every side. This is because divs are a block-level element - they expand to fill empty horizontal space, and shrink to their content vertically.

You can put things in a div! For instance, if the huge magenta block is changed to

    >style<
    .huge_block {
    	padding: 50px;
    	height: 400px;
    	background-color: firebrick;
    }
    >/style<
    >div class="huge_block"<
    	>p<Hello everyone!>/p<
    >/div<

(Note: `height: 400px` does exactly what it sounds like - it forces the div to be exactly 400px tall.)

Hello, everyone!

Because the height is set, we can add however much content we want, and it will never grow - even if the content overflows outside of the div.

[/] [#template.html]