<!--#include virtual="commontop.html" -->
<title>Web Programming Step by Step, Lecture 5: Floating and Positioning</title>
</head>
<!--
common bug: floating content too low in HTML
-->
<body>
<div class="layout">
<div id="controls"><!-- DO NOT EDIT --></div>
<div id="currentSlide"><!-- DO NOT EDIT --></div>
<div id="header"></div>
<div id="footer">
<h1><em>Web Programming Step by Step</em>, Lecture 5</h1>
<h2>Floating and Positioning Elements</h2>
</div>
</div>
<div class="presentation">
<div class="slide">
<h1><a href="http://www.webstepbook.com/">Web Programming Step by Step</a></h1>
<h3>Lecture 5 <br /> Floating and Positioning Elements</h3>
<h4>Reading: 4.3, 4.4, 4.6</h4>
<p class="license">
Except where otherwise noted, the contents of this presentation are Copyright 2010 Marty Stepp and Jessica Miller.
</p>
<div class="w3c">
<a href="http://validator.w3.org/check/referer"><img src="images/w3c-xhtml11.png" alt="Valid XHTML 1.1" /></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="images/w3c-css.png" alt="Valid CSS!" /></a>
</div>
</div>
<div class="slide titleslide">
<h1>4.3: Floating Elements</h1>
<ul>
<li>
4.1: Styling Page Sections
</li>
<li>
4.2: Introduction to Layout
</li>
<li>
<strong>4.3: Floating Elements</strong>
</li>
<li>
4.4: Sizing and Positioning
</li>
</ul>
</div>
<div class="slide">
<h1>
The CSS <code><a href="http://www.w3schools.com/css/pr_class_float.asp">float</a></code> property
(<a href="http://www.w3.org/TR/REC-CSS2/visuren.html#floats">reference</a>)
<span class="readingsection">(4.3.1)</span>
</h1>
<table class="standard">
<tr>
<th>
property
</th>
<th>
description
</th>
</tr>
<tr>
<td>
<code>float</code>
</td>
<td>
side to hover on; can be <code>left</code>, <code>right</code>, or <code>none</code> (default)
</td>
</tr>
</table>
<ul>
<li>
<img src="images/float-clipped.png" alt="float" style="float: right; margin-left: 1em" />
a <em class="term">floating</em> element is removed from normal document flow
</li>
<li>
underlying text wraps around it as necessary
</li>
</ul>
</div>
<div class="slide">
<h1>Float example</h1>
<div class="example">
<pre class="examplecode html">
<img src="images/borat.jpg" alt="Borat" class="headericon" />
Borat Sagdiyev (born July 30, 1972) is a ...
</pre>
<pre class="examplecode css">
img.headericon {
<em>float: left;</em>
}
</pre>
<div class="exampleoutput">
<img src="images/borat.jpg" alt="Borat" class="headericon" style="float: left; width: 100px;" />
Borat Sagdiyev (born July 30, 1972) is a fictional Kazakhstani journalist played by British-Jewish comedian Sacha Baron Cohen. He is the main character portrayed in the controversial and successful film Borat: Cultural Learnings of America for Make Benefit Glorious Nation of Kazakhstan ...
</div>
</div>
</div>
<div class="slide">
<h1>Float vs. alignment</h1>
<div style="background-color: #ddd; padding: .25em">
none 1 before
</div>
<div style="background-color: #ddd; padding: .25em">
none 2 before
</div>
<div style="background-color: #bbf; float: right; padding: .25em">
right #1
</div>
<div style="background-color: #fbb; float: right; padding: .25em">
right #2
</div>
<div style="background-color: #bfb; float: left; padding: .25em">
left #1
</div>
<div style="background-color: #ffb; float: left; padding: .25em">
left #2
</div>
<div style="background-color: #ddd; padding: .25em">
none 1 after
</div>
<div style="background-color: #ddd; padding: .25em">
none 2 after
</div>
<ul style="clear: both">
<li>
using Firebug, toggle the above <code>div</code>s from being aligned to floated...
</li>
</ul>
</div>
<div class="slide">
<h1>Common <code>float</code>ing content and width</h1>
<p style="background-color: red;">I am not floating, no width set</p>
<p style="float: right; background-color: teal;">I am floating right, no width set</p>
<p style="background-color: teal; float: right">I am floating right, no width set, but my text is very long so this paragraph doesn't really seem like it's floating at all, darn</p>
<p style="clear: both; float: left; background-color: red; width: 45%">I am not floating, 45% width</p>
<p style="float: right; background-color: teal; width: 45%">I am floating right, 45% width</p>
<ul style="clear: both;">
<li>often floating elements should have a <code>width</code> property value
<ul>
<li>if no <code>width</code> is specified, other content may be unable to wrap around the floating element</li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>Interactive Example: Content vs. container</h1>
<p id="content_vs_container_p" style="background-color: fuchsia; border: dashed 6px red; margin-left: 10px; margin-right: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce.</p>
<p style="background-color: lightgray;">Some other content that may or may not be important maybe haps I'm thinkin or maybe not too I dunno whatever and ever amen to that bruthah and sistah Sadie Sally sells seashells down by the seashore</p>
<fieldset id="content_vs_container_fieldset" style="width: 60%; margin-left: auto; margin-right: auto; font-size: 80%">
<legend>Interactive Example</legend>
<code>text-align</code>:
<label><input type="radio" name="text_align" value="left" checked="checked" /> <code>left</code></label>
<label><input type="radio" name="text_align" value="right" /> <code>right</code></label>
<label><input type="radio" name="text_align" value="center" /> <code>center</code></label>
<label><input type="radio" name="text_align" value="justify" /> <code>justify</code></label>
<br/>
<code>width</code>:
<label><input type="radio" name="width" value="auto" checked="checked" /> <code>auto</code></label>
<label><input type="radio" name="width" value="50%" /> <code>50%</code></label>
<br/>
horizontal margins:
<label><input type="radio" name="margins" value="10px" checked="checked" /> <code>10px</code></label>
<label><input type="radio" name="margins" value="auto" /> <code>auto</code></label>
<br/>
<code>float</code>:
<label><input type="radio" name="float" value="none" checked="checked" /> <code>none</code></label>
<label><input type="radio" name="float" value="left" /> <code>left</code></label>
<label><input type="radio" name="float" value="right" /> <code>right</code></label>
<script type="text/javascript">
$$('#content_vs_container_fieldset input[name="float"]').each(function(elem) {
elem.onclick = function() {
$('content_vs_container_p').style.cssFloat = this.value;
}
});
$$('#content_vs_container_fieldset input[name="width"]').each(function(elem) {
elem.onclick = function() {
$('content_vs_container_p').style.width = this.value;
}
});
$$('#content_vs_container_fieldset input[name="text_align"]').each(function(elem) {
elem.onclick = function() {
$('content_vs_container_p').style.textAlign = this.value;
}
});
$$('#content_vs_container_fieldset input[name="margins"]').each(function(elem) {
elem.onclick = function() {
$('content_vs_container_p').style.marginLeft = this.value;
$('content_vs_container_p').style.marginRight = this.value;
}
});
</script>
</fieldset>
<ul style="clear: both;">
<li>some styles apply to inline content inside an element</li>
<li>some styles apply to the element itself</li>
<li>difference between aligning/positioning the content inside the container, and the container itself</li>
<!-- <li>centering…
<ul>
<li>content: <code>text-align: center</code></li>
<li>container: auto margins</li>
</ul>
</li>
<li>aligning…
<ul>
<li>content: <code>text-align: left</code>/<code>right</code></li>
<li>container: <code>float: left</code>/<code>right</code></li>
</ul>
</li> -->
</ul>
</div>
<div class="slide">
<h1>
The <code><a href="http://www.w3schools.com/css/pr_class_clear.asp">clear</a></code> property
<span class="readingsection">(4.3.2)</span>
</h1>
<div class="example">
<pre class="examplecode css">
p { background-color: fuchsia; }
h2 { <em>clear: right;</em> border: dashed 6px red; background-color: yellow; }
</pre>
<div class="exampleoutput insertoutput">
<p><img src="images/homestar_runner.png" alt="homestar runner" style="float: right" />Homestar Runner is a Flash animated Internet cartoon. It mixes surreal humour with ...</p>
<h2 id="clear_property_h2">My Homestar Runner Fan Site</h2>
</div>
</div>
<fieldset id="clear_property_fieldset" style="width: 50%; text-align: center; margin-left: auto; margin-right: auto; font-size: 80%">
<legend>Interactive Example</legend>
<code>clear</code>:
<label><input type="radio" name="clear" value="none" /> <code>none</code></label>
<label><input type="radio" name="clear" value="right" checked="checked"/> <code>right</code></label>
<script type="text/javascript">
$$('#clear_property_fieldset input[name="clear"]').each(function(elem) {
elem.onclick = function() {
$('clear_property_h2').style.clear = this.value;
}
});
</script>
</fieldset>
<table class="standard">
<tr>
<th>
property
</th>
<th>
description
</th>
</tr>
<tr>
<td>
<code>clear</code>
</td>
<td>
disallows floating elements from overlapping this element; <br />
can be <code>left</code>, <code>right</code>, <code>both</code>, or <code>none</code> (default)
</td>
</tr>
</table>
</div>
<div class="slide">
<h1>Clear diagram</h1>
<pre class="examplecode css">
div#sidebar { float: right; }
p { <em>clear: right;</em> }
</pre>
<p class="description">
<img src="images/clear.png" alt="float clear" />
</p>
</div>
<div class="slide">
<h1>
Common error: container too short (4.3.3)</span>
</h1>
<div class="example">
<pre class="examplecode html">
<p><img src="images/homestar_runner.png" alt="homestar runner" />
Homestar Runner is a Flash animated Internet cartoon.
It mixes surreal humour with ....</p>
</pre>
<pre class="examplecode examplecode2 css">
p { border: 6px dashed red; background-color: fuchsia; }
img { float: right; }
</pre>
<div class="exampleoutput insertoutput"></div>
</div>
<ul>
<li>
We want the <code>p</code> containing the image to extend downward so that its border encloses the entire image
</li>
</ul>
</div>
<div class="slide">
<h1>
The <code><a href="http://www.quirksmode.org/css/clearing.html">overflow</a></code> property
<span class="readingsection">(4.3.3)</span>
</h1>
<div class="example">
<pre class="examplecode css">
p { border: 6px dashed red; background-color: fuchsia;
<em>overflow: hidden;</em> }
</pre>
<div class="exampleoutput insertoutput">
<p id="overflow_property_p">
<img src="images/homestar_runner.png" alt="homestar runner" style="float: right" />
Homestar Runner is a Flash animated Internet cartoon. It mixes surreal humour with ....
</p>
</div>
</div>
<fieldset id="overflow_property_fieldset" style="width: 50%; text-align: center; margin-left: auto; margin-right: auto; font-size: 80%">
<legend>Interactive Example</legend>
<code>overflow</code>:
<label><input type="radio" name="overflow" value="hidden" checked="checked"/> <code>hidden</code></label>
<label><input type="radio" name="overflow" value="visible" /> <code>visible</code></label>
<br/>
<code>height</code>:
<label><input type="radio" name="height" value="auto" checked="checked" /> <code>auto</code></label>
<label><input type="radio" name="height" value="50px" /> <code>200px</code></label>
<script type="text/javascript">
$$('#overflow_property_fieldset input[name="overflow"]').each(function(elem) {
elem.onclick = function() {
$('overflow_property_p').style.overflow = this.value;
}
});
$$('#overflow_property_fieldset input[name="height"]').each(function(elem) {
elem.onclick = function() {
$('overflow_property_p').style.height = this.value;
}
});
</script>
</fieldset>
<table class="standard">
<tr>
<th>
property
</th>
<th>
description
</th>
</tr>
<tr>
<td>
<code>overflow</code>
</td>
<td>
specifies what to do if an element's content is too large; <br />
can be <code>auto</code>, <code>visible</code>, <code>hidden</code>, or <code>scroll</code>
</td>
</tr>
</table>
</div>
<div class="slide">
<h1>
Multi-column layouts
<span class="readingsection">(4.3.4)</span>
</h1>
<div class="example">
<pre class="examplecode html">
<div>
<p>the first paragraph</p>
<p>the second paragraph</p>
<p>the third paragraph</p>
Some other text that is possibly important or maybe not well I dunno
</div>
</pre>
<pre class="examplecode css">
p { float: right; width: 20%; margin: 0.5em;
border: 2px solid black; }
div { border: 3px dotted green; overflow: hidden; }
</pre>
<div class="exampleoutput insertoutput"></div>
</div>
</div>
<div class="slide titleslide">
<h1>4.4: Sizing and Positioning</h1>
<ul>
<li>
4.1: Styling Page Sections
</li>
<li>
4.2: Introduction to Layout
</li>
<li>
4.3: Floating Elements
</li>
<li>
<strong>4.4: Sizing and Positioning</strong>
</li>
</ul>
</div>
<div class="slide">
<h1>
The <a href="http://www.w3schools.com/css/pr_class_position.asp"><code>position</code></a> property
(<a href="http://www.w3schools.com/css/css_positioning.asp">examples</a>)
<span class="readingsection">(4.4.2)</span>
</h1>
<div class="example">
<pre class="examplecode css">
div#ad {
<em>position: fixed;</em>
right: 10%;
top: 45%;
}
</pre>
<div class="exampleoutput insertoutput">
<div id="ad">Here I am!</div>
</div>
</div>
<table class="standard">
<tr>
<th>
property
</th>
<th>
value
</th>
<th>
description
</th>
</tr>
<tr>
<td rowspan="5">
<code>position</code>
</td>
</tr>
<tr>
<td>
<code>static</code>
</td>
<td>
default position
</td>
</tr>
<tr>
<td>
<code>relative</code>
</td>
<td>
offset from its normal static position
</td>
</tr>
<tr>
<td>
<code>absolute</code>
</td>
<td>
a fixed position <em>within its containing element</em>
</td>
</tr>
<tr>
<td>
<code>fixed</code>
</td>
<td>
a fixed position <em>within the browser window
</td>
</tr>
<tr>
<td>
<a href="http://www.w3schools.com/css/pr_pos_top.asp"><code>top</code></a>,
<a href="http://www.w3schools.com/css/pr_pos_bottom.asp"><code>bottom</code></a>, <br />
<a href="http://www.w3schools.com/css/pr_pos_left.asp"><code>left</code></a>,
<a href="http://www.w3schools.com/css/pr_pos_right.asp"><code>right</code></a>
</td>
<td colspan="2">
positions of box's corners
</td>
</tr>
</table>
</div>
<div class="slide">
<h1>Absolute positioning</h1>
<pre class="examplecode css">
#menubar {
<em>position: absolute;</em>
left: 400px;
top: 50px;
}
</pre>
<div class="rightfigure">
<img src="images/absoluteposition.png" alt="absolute positioning" style="width: 100%;" />
</div>
<ul>
<li>removed from normal flow (like floating ones)</li>
<li>positioned relative to the block element containing them (assuming that block also uses <code>absolute</code> or <code>relative</code> positioning)</li>
<li>actual position determined by <code>top</code>, <code>bottom</code>, <code>left</code>, <code>right</code> values</li>
<li>should often specify a <code>width</code> property as well</li>
</ul>
</div>
<div class="slide">
<h1>Relative positioning</h1>
<pre class="examplecode css">
#area2 { <em>position: relative;</em> }
</pre>
<div class="rightfigure">
<img src="images/relativeposition.png" alt="absolute positioning" style="width: 100%;" />
</div>
<ul>
<li>leaves a "hole" where the element was, and moves it elsewhere (surrounding elements do not re-flow)</li>
<li>more commonly used to make absolutely-positioned child elements be positioned with respect to this element rather than the page</li>
</ul>
</div>
<div class="slide">
<h1>Fixed positioning</h1>
<div class="rightfigure">
<img src="images/fixedposition.png" alt="fixed positioning" style="width: 100%;" />
</div>
<ul>
<li>removed from normal flow (like floating ones)</li>
<li>positioned relative to the browser window
<ul>
<li>
even when the user scrolls the window, element will remain in the same place
</li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>Alignment vs. float vs. position</h1>
<ol>
<li>if possible, lay out an element by <em>aligning</em> its content
<ul>
<li>horizontal alignment: <code>text-align</code>
<ul>
<li>set this on a block element; it aligns the content within it (not the block element itself)</li>
</ul>
</li>
<li>vertical alignment: <code>vertical-align</code>
<ul>
<li>set this on an inline element, and it aligns it vertically within its containing element</li>
</ul>
</li>
</ul>
</li>
<li>if alignment won't work, try <em>floating</em> the element</li>
<li>if floating won't work, try <em>positioning</em> the element
<ul>
<li>absolute/fixed positioning are a last resort and should not be overused</li>
</ul>
</li>
</ol>
</div>
<div class="slide">
<h1>The <a href="http://www.w3schools.com/css/pr_pos_vertical-align.asp"><code>vertical-align</code></a> property</h1>
<p id="vertical_align_p" style="font-size: 600%; font-family: serif; background-color: fuchsia; position: relative; margin-bottom: .167em;">
<span id="vertical_align_span" style="background-color: yellow;">
Sphinx <img class="vertical_align_example" src="images/sphinx.png" alt="Sphinx" /><span class="vertical_align_example" style="background-color: cyan;">þ</span>
</span>
</p>
<fieldset id="vertical_align_fieldset" style="width: 60%; margin-left: auto; margin-right: auto; font-size: 80%">
<legend>Interactive Example</legend>
<code>vertical-align</code>:
<select id="vertical_align_select" style="font-size: 80%">
<option value="baseline">baseline</option>
<option value="top">top</option>
<option value="bottom">bottom</option>
<option value="text-top">text-top</option>
<option value="text-bottom">text-bottom</option>
<option value="middle">middle</option>
<option value="super">super</option>
<option value="sub">sub</option>
</select>
<script type="text/javascript">
// var vertical_align_markers = {
// 'baseline': ['bottom', 'span', 'baseline'],
// 'top': ['top', 'p', 'top'],
// 'middle': ['middle', 'p', 'middle'],
// 'bottom': ['bottom', 'p', 'bottom'],
// 'super': ['bottom', 'span', 'x-height'],
// 'sub': ['middle', 'span', 'baseline'],
// };
$('vertical_align_select').observe('change', function() {
var val = this.value;
$$('.vertical_align_example').each(function(elem) {
elem.style.verticalAlign = val;
});
});
</script>
</fieldset>
<table class="standard">
<tr>
<th>
property
</th>
<th>
description
</th>
</tr>
<tr>
<td>
<code>vertical-align</code>
</td>
<td>
specifies how an inline element should be positioned vertically on a line of text;
can be <code>top</code>, <code>middle</code>, <code>bottom</code>, <code>baseline</code> (default), <code>sub</code>, <code>super</code>, <code>text-top</code>, <code>text-bottom</code>, or a length value or <code>%</code>
</td>
</tr>
</table>
</div>
<div class="slide">
<h1>Common bug: space under image</h1>
<div class="example">
<pre class="examplecode html">
<p style="background-color: red; padding: 0px; margin: 0px;">
<img src="images/smiley.png" alt="smile" />
</p>
</pre>
<div id="common_bug_output" class="exampleoutput insertoutput"></div>
</div>
<fieldset id="common_bug_fieldset" style="width: 25%; text-align: center; margin-left: auto; margin-right: auto; font-size: 80%">
<legend>Interactive Example</legend>
<button id="common_bug_button" style="font-size: 80%;">Add text with descenders</button>
<script type="text/javascript">
$('common_bug_button').observe('click', function() {
if (this.innerHTML.match(/^Add/)) {
var text = document.createTextNode(" Zyxzzy");
$('common_bug_output').firstChild.appendChild(text);
this.innerHTML = "Remove text with descenders";
} else {
$('common_bug_output').firstChild.removeChild($('common_bug_output').firstChild.lastChild);
this.innerHTML = "Add text with descenders";
}
});
</script>
</fieldset>
<ul>
<li>red space under the image, despite <code>padding</code> and <code>margin</code> of 0</li>
<li>this is because the bottom of the image is aligned to the baseline of the line of text, and there is space beneath for descenders</li>
<li>setting <code>vertical-align</code> to <code>bottom</code> fixes the problem (so does setting <code>line-height</code> to <code>0px</code>)</li>
</ul>
</div>
<div class="slide">
<h1>Details about inline boxes</h1>
<ul>
<li>size properties (<code>width</code>, <code>height</code>, <code>min-width</code>, etc.) are ignored for inline boxes</li>
<li><code>margin-top</code> and <code>margin-bottom</code> are ignored, but <code>margin-left</code> and <code>margin-right</code> are not</li>
<li>the containing block box's <code>text-align</code> property controls horizontal position of inline boxes within it
<ul>
<li>text-align does not align block boxes within the page</li>
</ul>
</li>
<li>each inline box's <code>vertical-align</code> property aligns it vertically within its block box
</li>
</ul>
</div>
<div class="slide">
<h1>
The <a href="http://www.w3schools.com/css/pr_class_display.asp"><code>display</code></a> property
<span class="readingsection">(4.4.4)</span>
</h1>
<div class="example">
<pre class="examplecode css">
h2 { <em>display: inline;</em> background-color: yellow; }
</pre>
<div class="exampleoutput insertoutput">
<h2>This is a heading</h2>
<h2>This is another heading</h2>
</div>
</div>
<table class="standard">
<tr>
<th>
property
</th>
<th>
description
</th>
</tr>
<tr>
<td>
<code>display</code>
</td>
<td>
sets the type of CSS box model an element is displayed with
</td>
</tr>
</table>
<ul>
<li>values: <code>none</code>, <code>inline</code>, <code>block</code>, <code>run-in</code>, <code>compact</code>, ...</li>
<li>use sparingly, because it can radically alter the page layout</li>
</ul>
</div>
<div class="slide">
<h1>Displaying block elements as inline</h1>
<div class="example">
<pre class="examplecode html">
<ul id="topmenu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</pre>
<pre class="examplecode css">
#topmenu li {
<em>display: inline;</em>
border: 2px solid gray;
margin-right: 1em;
}
</pre>
<div class="exampleoutput insertoutput"></div>
</div>
<ul>
<li>lists and other block elements can be displayed inline
<ul>
<li>flow left-to-right on same line</li>
<li>width is determined by content (block elements are 100% of page width)</li>
</ul>
</li>
</ul>
</div>
<!-- absolute pos and 100% body size -->
<div class="slide">
<h1>The <a href="http://www.w3schools.com/css/pr_class_visibility.asp"><code>visibility</code></a> property</h1>
<div class="example">
<pre class="examplecode css">
p.secret {
<em>visibility: hidden;</em>
}
</pre>
<div class="exampleoutput insertoutput">
<p class="secret">
Since nobody can see this anyway: ca-ca poo-poo pee-pee!!!
</p>
</div>
</div>
<table class="standard">
<tr>
<th>
property
</th>
<th>
description
</th>
</tr>
<tr>
<td>
<code>visibility</code>
</td>
<td>
sets whether an element should be shown onscreen; <br />
can be <code>visible</code> (default) or <code>hidden</code>
</td>
</tr>
</table>
<ul>
<li>
<code>hidden</code> elements will still take up space onscreen, but will not be shown
<ul>
<li>to make it not take up any space, set <code>display</code> to <code>none</code> instead</li>
</ul>
</li>
<li>can be used to show/hide dynamic HTML content on the page in response to events</li>
</ul>
</div>
<!--#include virtual="commonbottom.html" -->