<section>
<?= t_head("Load Test Page", "5") ?>
<!-- <figure class="example">
<img src="aboutme_no_css.png" alt="About Victoria Kirst" />
<figcaption>This is a similar page describing former CSE 190 M TA and coauthor of our textbook, Victoria Kirst.</figcaption>
</figure>
-->
<p>Download the following skeleton HTML file:</p>
<p class="resource"><a href="skeleton.html">skeleton.html</a></p>
<p>Create a CSS file named <samp>minilab2.css</samp> in the same folder and ensure it’s properly linked to your HTML file by setting the background color of the page to something obvious. (Then remove the background color.)</p>
</section>
<section>
<?= t_head("Float & Clear", "15–20") ?>
<p>The skeleton code has four elements: a list and three paragraphs. They each have an <code>id</code> attribute set. The list is called <code>a</code>, and the paragraphs are called <code>b</code>, <code>c</code>, and <code>d</code>.</p>
<p>The problems below will ask you to make some CSS adjustments and then answer a question. Create a new text file (called, for example, <samp>minilab2.txt</samp>) and put your answers to each question in there. They need not be more than a sentence or two. Feel free to discuss each question with your neighbors!</p>
<ol>
<li>Make B float to the left and take up 30% of the page width. Notice that it remains below A. Why?</li>
<li>Make C have an obvious background color (e.g., <code class="color">fuchsia</code>). Notice that the background color extends behind B.
<ul>
<li>Why do you think there is space above B?</li>
</ul>
</li>
<li>Make D float to the right, taking up 30% of the page width. Notice that it remains below B. Why?</li>
<li>Make C clear B.</li>
</ol>
</section>
<section>
<?= t_head("Page Sections", "25–30") ?>
<ol>
<li>Comment out your previous style rules for A, B, C, and D.</li>
<li>Wrap A and B in a <code>div</code> with an <code>id</code> of <code>e</code>; wrap C and D in a <code>div</code> with an <code>id</code> of <code>f</code>.</li>
<li>Make E float to the left, with a width of 30% of the page. Give it a distinctive background color.</li>
<li>Make F also float to the left, with a width of 70% of the page. Give it a (different) distinctive background color.</li>
<li>Add a margin of 1px on the right side of E.
<ul>
<li>What happens, and why?</li>
<li>Would the same thing happen if you set padding instead?</li>
<li>Can you think of a way to specify margins and/or padding around columns while at the same time dividing columns by percentage of the available width? (Hint: What if you could add more <code>div</code>s?) Do it and then describe the solution you came up with.</li>
</ul>
</li>
<li>How would you restrict the amount of space the two columns take up, so that they still have the same proportions but together take up only 75% of the available page width? (Hint: What if you could add more <code>div</code>s?) Do it and then describe the solution you came up with.
<ul>
<li>Now, how would you go about centering the group of columns on the page? (Hint: Recall how to <a href="../../lectures/page-sections-box-model/#slide44">center a block-level element</a>.)</li>
</ul>
</li>
</ol>
</section>
<footer>
<p>If you’ve finished everything, good job! Start playing more with margins & padding on floated elements, inspecting the page with Firebug.</p>
</footer>