<script src="<?= $BASENAME ?>/lib/global/js/prettify/lang-css.js" type="text/javascript"></script>
<p>Below is one possible solution to this problem.</p>
<h3>Exercise 2: Float & Clear</h3>
<header>
<h4>Step 1</h4>
<div class="workinglink"><a href="solution/minilab2-ex2.1.html">working example</a></div>
</header>
<pre class="prettyprint lang-css linenums"><?= escape(load(dirname(__FILE__) . "/solution/minilab2-ex2.1.css")) ?></pre>
<p class="response">B remains below A because floated content does not “raise” next to non-floated content, but the other way around.</p>
<header>
<h4>Step 2</h4>
<div class="workinglink"><a href="solution/minilab2-ex2.2.html">working example</a></div>
</header>
<pre class="prettyprint lang-css linenums"><?= escape(load(dirname(__FILE__) . "/solution/minilab2-ex2.2.css", 13)) ?></pre>
<p class="response">There is space above B because paragraphs (like B) have default top and bottom margin. Note that C, also a paragraph, has a top margin — but B’s margin aligns to C’s <em>content area</em>, not to its margin. Which is a little weird.</p>
<header>
<h4>Step 3</h4>
<div class="workinglink"><a href="solution/minilab2-ex2.3.html">working example</a></div>
</header>
<pre class="prettyprint lang-css linenums"><?= escape(load(dirname(__FILE__) . "/solution/minilab2-ex2.3.css", 17)) ?></pre>
<p class="response">Again, non-floated content “raises” next to floated content, not the other way around. So D won’t raise to be next to C and B.</p>
<header>
<h4>Step 4</h4>
<div class="workinglink"><a href="solution/minilab2-ex2.4.html">working example</a></div>
</header>
<pre class="prettyprint lang-css linenums"><?= escape(load(dirname(__FILE__) . "/solution/minilab2-ex2.4.css")) ?></pre>
<h3>Exercise 3: Page Sections</h3>
<header>
<h4>Step 2</h4>
<div class="workinglink"><a href="solution/minilab2-ex3.2.html">working example</a></div>
</header>
<pre class="prettyprint lang-html linenums"><?= escape(load(dirname(__FILE__) . "/solution/minilab2-ex3.2.html")) ?></pre>
<header>
<h4>Step 3</h4>
<div class="workinglink"><a href="solution/minilab2-ex3.3.html">working example</a></div>
</header>
<pre class="prettyprint lang-css linenums"><?= escape(load(dirname(__FILE__) . "/solution/minilab2-ex3.3.css")) ?></pre>
<header>
<h4>Step 4</h4>
<div class="workinglink"><a href="solution/minilab2-ex3.4.html">working example</a></div>
</header>
<pre class="prettyprint lang-css linenums"><?= escape(load(dirname(__FILE__) . "/solution/minilab2-ex3.4.css", 14)) ?></pre>
<header>
<h4>Step 5</h4>
<div class="workinglink"><a href="solution/minilab2-ex3.5.html">working example</a></div>
</header>
<pre class="prettyprint lang-html linenums"><?= escape(load(dirname(__FILE__) . "/solution/minilab2-ex3.5.html", 18, 37)) ?></pre>
<pre class="prettyprint lang-css linenums"><?= escape(load(dirname(__FILE__) . "/solution/minilab2-ex3.5.css", 20)) ?></pre>
<p class="response">E and F add up to exactly 100%, so if we add any margin (however small) to either of them, the total amount of space they’ll occupy will be greater than 100% width — which will cause the second column to wrap beneath the first.</p>
<p class="response">So as long as we want the widths to add up to exactly 100%, it’s impossible to add margin on either E or F themselves — however, we can specify margin on something <em>inside</em> of E or F.</p>
<p class="response">In our example, we’ve added <code>div</code>s with a class of <code>container</code> directly inside E and F, width left and right margins. This adds the necessary space on either side, while staying within the %-width of their parent elements.</p>
<header>
<h4>Step 6</h4>
<div class="workinglink"><a href="solution/minilab2-ex3.6.html">working example</a></div>
</header>
<pre class="prettyprint lang-html linenums"><?= escape(load(dirname(__FILE__) . "/solution/minilab2-ex3.6.html")) ?></pre>
<pre class="prettyprint lang-css linenums"><?= escape(load(dirname(__FILE__) . "/solution/minilab2-ex3.6.css")) ?></pre>
<p class="response">If we wrap the entire content of the page in a <code>div</code> (which we’ve called <code>page</code>), we can restrict its width to 75% and center it on the page using auto margins.</p>
</section>