<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: Positioning Practice</h3>
<header>
<h4>Step 1</h4>
<div class="workinglink"><a href="solution/minilab3-ex2.1.html">working example</a></div>
</header>
<pre class="prettyprint lang-css linenums"><?= escape(load(dirname(__FILE__) . "/solution/minilab3-ex2.1.css")) ?></pre>
<p class="response">B hasn’t moved from its original position, but the list item after it has moved up to take its place, and B now partially covers it. (This is because anything absolutely positioned is removed from the normal document flow.)</p>
<header>
<h4>Step 2</h4>
<div class="workinglink"><a href="solution/minilab3-ex2.2.html">working example</a></div>
</header>
<pre class="prettyprint lang-css linenums"><?= escape(load(dirname(__FILE__) . "/solution/minilab3-ex2.2.css", 8)) ?></pre>
<p class="response">B now goes to the right-bottom of the window. When I wrote this problem, I thought it would go to the right bottom of the <em>entire page</em>, so that if the window was small enough and the content large enough, B might appear off-screen and you’d have to scroll down to see it.</p>
<p class="response">But as most people discovered during class, B moved to the right-bottom of the <em>window</em> instead. As a result, I’m not sure we can really say that the <code>body</code> tag is its “bounding parent,” which is the response I was trying to elicit.</p>
<header>
<h4>Step 3</h4>
<div class="workinglink"><a href="solution/minilab3-ex2.3.html">working example</a></div>
</header>
<pre class="prettyprint lang-css linenums"><?= escape(load(dirname(__FILE__) . "/solution/minilab3-ex2.3.css", 14)) ?></pre>
<p class="response">A doesn’t move at all (since relative positioning offsets an element from its original position, and we haven’t specified an offset yet). However, since B is inside of A, B is now absolutely-positioned at the bottom-right of A, and not the bottom-right of the browser window.</p>
<header>
<h4>Step 4</h4>
<div class="workinglink"><a href="solution/minilab3-ex2.4.html">working example</a></div>
</header>
<pre class="prettyprint lang-css linenums"><?= escape(load(dirname(__FILE__) . "/solution/minilab3-ex2.4.1.css", 14)) ?></pre>
<p class="response">Setting left and bottom properties of 0 pixels on A doesn’t move it at all, because for relatively-positioned elements the left and bottom properties specify offset from where it normally is.</p>
<pre class="prettyprint lang-css linenums"><?= escape(load(dirname(__FILE__) . "/solution/minilab3-ex2.4.2.css", 14)) ?></pre>
<p class="response">Element A actually moves this time, and is now offset 50 pixels from its previous left and bottom boundaries. Notice that everything inside moves with it.</p>
<header>
<h4>Step 5</h4>
<div class="workinglink"><a href="solution/minilab3-ex2.5.html">working example</a></div>
</header>
<pre class="prettyprint lang-css linenums"><?= escape(load(dirname(__FILE__) . "/solution/minilab3-ex2.5.css", 14)) ?></pre>
<p class="response">Element A now moves to be 50 pixels from the left and bottom of the browser window. It doesn’t move from that spot, even when the page is scrolled. Again, everything inside moves with it — including B, which is still absolutely-positioned to the bottom-right of A.</p>
<h3>Exercise 3: Page Sections</h3>
<header>
<h4>Step 2</h4>
<div class="workinglink"><a href="solution/minilab3-ex3.2.html">working example</a></div>
</header>
<pre class="prettyprint lang-html linenums"><?= escape(load(dirname(__FILE__) . "/solution/minilab3-ex3.2.html", 36, 55)) ?></pre>
<pre class="prettyprint lang-css linenums"><?= escape(load(dirname(__FILE__) . "/solution/minilab3-ex3.2.css", 8)) ?></pre>
<p class="response">To turn this into a fixed-fluid layout we’ll begin by floating A to the left, and grouping the remaining paragraphs together in a <code>div</code> which we’ll call C.</p>
<p class="response">To make sure none of the content in C wraps around beneath A, we’ll simply indent C it such that its left edge begins where A’s right edge ends. (Being floated, A will normally overlap part of block-level elements that follow it. Think of A as now overlapping nothing but C’s left margin.)</p>
<p class="response">Since A has a width of 200 pixels set, we might just try that first. But C still overlaps, because A, being a list, also has some default left padding (this is where the bullet for each list item goes). Since that’s measured in ems, and we’re using pixels, the easiest way to be precise is to remove the padding for now. (If we want to retain the padding, we can wrap the <code>ul</code> in a <code>div</code> and specify the width on that instead of on the <code>ul</code>.)</p>
<header>
<h4>Step 3</h4>
<div class="workinglink"><a href="solution/minilab3-ex3.3.html">working example</a></div>
</header>
<pre class="prettyprint lang-css linenums"><?= escape(load(dirname(__FILE__) . "/solution/minilab3-ex3.3.css", 13)) ?></pre>
<p class="response">To add space between A and the right column (which we’ve named C), we just indent C a little more. We simply increase its left margin by however much space we want to have between A and C.</p>
<header>
<h4>Step 4</h4>
<div class="workinglink"><a href="solution/minilab3-ex3.4.html">working example</a></div>
</header>
<pre class="prettyprint lang-html linenums"><?= escape(load(dirname(__FILE__) . "/solution/minilab3-ex3.4.html", 43, 57)) ?></pre>
<pre class="prettyprint lang-css linenums"><?= escape(load(dirname(__FILE__) . "/solution/minilab3-ex3.4.css", 17)) ?></pre>
<p class="response">We’ll wrap the paragraphs in <code>div</code>s with a class of <code>column</code> so we can style them both the same — each floated left, taking up half the space of their parent element C.</p>
<header>
<h4>Step 5</h4>
<div class="workinglink"><a href="solution/minilab3-ex3.5.html">working example</a></div>
</header>
<pre class="prettyprint lang-css linenums"><?= escape(load(dirname(__FILE__) . "/solution/minilab3-ex3.5.css", 22)) ?></pre>
<p class="response">Here we can kill two birds with one stone, ensuring there will be space between the two columns <em>and</em> on the right side of the page by setting a right margin on the stuff inside each <code>.column</code>.</p>
<header>
<h4>Step 6</h4>
<div class="workinglink"><a href="solution/minilab3-ex3.6.html">working example</a></div>
</header>
<pre class="prettyprint lang-html linenums"><?= escape(load(dirname(__FILE__) . "/solution/minilab3-ex3.6.html")) ?></pre>
<pre class="prettyprint lang-css linenums"><?= escape(load(dirname(__FILE__) . "/solution/minilab3-ex3.6.css")) ?></pre>
<p class="response">We can use the <code>max-width</code> and <code>min-width</code> properties to set maximum and minimum widths on elements. If we set those properties on C, we can constrain the total amount of space the two columns of paragraphs take up.</p>