[!]
[=title "Week 4: The Div Tag"]
[=content-]
<p>
	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 <code>&lt;div&gt; &lt;/div&gt;</code>!
</p>
<p>
	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 <code>div</code>
	inside a <code>p</code> for Weird Reasons™). If you just put a div tag in your document, you won't see it at all!
</p>
<p>
	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: 
</p>
<pre><code>&gt;style&lt;
.huge_block {
	padding: 200px;
	background-color: magenta;
}
&gt;/style&lt;
&gt;div class="huge_block"&lt;&gt;/div&lt;
</code></pre>
<p>
	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:
</p>
<div style="padding: 200px;background-color: magenta;"></div>
<p>
	Pretty terrible and unnecessary, but usefully so!
</p>
<p>
	If your screen is wider than 800px, you may notice this div looks wider than it is tall, even though <code>padding</code> adds the same amount to every side.
	This is because divs are a <i>block-level element</i> - they expand to fill empty horizontal space, and shrink to their content vertically.
</p>
<p>
	You can put things in a div! For instance, if the huge magenta block is changed to
</p>
<pre><code>&gt;style&lt;
.huge_block {
	padding: 50px;
	height: 400px;
	background-color: firebrick;
}
&gt;/style&lt;
&gt;div class="huge_block"&lt;
	&gt;p&lt;Hello everyone!&gt;/p&lt;
&gt;/div&lt;
</code></pre>
<p>
	(Note: <code>height: 400px</code> does exactly what it sounds like - it forces the div to be exactly 400px tall.)
</p>
<div style="height:400px;padding: 50px;background-color: firebrick;">
	<p>Hello, everyone!</p>
</div>
<p>
	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.
</p>
[/]
[#template.html]