Tyler Clarke
b5aa99b64a
All checks were successful
ClarkeIS Build / Build-Docker-Image (push) Successful in 26s
60 lines
2.2 KiB
HTML
60 lines
2.2 KiB
HTML
[!]
|
|
[=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><div> </div></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>>style<
|
|
.huge_block {
|
|
padding: 200px;
|
|
background-color: magenta;
|
|
}
|
|
>/style<
|
|
>div class="huge_block"<>/div<
|
|
</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>>style<
|
|
.huge_block {
|
|
padding: 50px;
|
|
height: 400px;
|
|
background-color: firebrick;
|
|
}
|
|
>/style<
|
|
>div class="huge_block"<
|
|
>p<Hello everyone!>/p<
|
|
>/div<
|
|
</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]
|