Slide 14 - Float Opposite § Session 04

Example 4.14 - float left and right - Example 4.14 (Without Styles) |

Markup
Style
Screenshot

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at sapien. Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreet neque, non pellentesque mauris turpis eu purus.</p>
<footer><p class="course"><a href="http://cscie12.dce.harvard.edu/">CSCI E-12 Home</a>|<a href="mailto:cscie12@dce.harvard.edu">cscie12@dce.harvard.edu</a></p>
<p class="global"><a href="http://www.harvard.edu/">Harvard University</a>|<a href="http://www.extension.harvard.edu/">Extension School</a></p>
</footer>

In style element (<style type="text/css">) within head element:

footer { 
  background-color: #fcf;
  border-top: thin solid #333; 
}
footer p.course { float: left; }
footer p.global { float: right; }
footer p {
  padding: 0.25em 0.5em 0.25em 0.5em;
  font-size: small;
}
footer a:link, 
footer a:visited, 
footer a:hover, 
footer a:active {
  text-decoration: none;
  color: navy;
  font-weight: bold;
  padding: 0.25em; 
}
footer a:hover {
  color: #ccf;
  background-color: navy;
}

float opposite

The background color of the parent footer did not display. The p elements within the footer have been "floated," therefore they have been removed from the calculation of the box model of the footer. The parent footer size is null.

Example 4.15 - float left and right and parent div - Example 4.15 (Without Styles) |

<p>Lorem ipsum dolor sit amet, consectetuer
  adipiscing elit. Sed feugiat nisi at sapien. Phasellus varius tincidunt ligula. Praesent
  nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreet neque,
  non pellentesque mauris turpis eu purus.</p><footer><p class="course"><a href="http://cscie12.dce.harvard.edu/">CSCI E-12 Home</a> |
    <a href="mailto:cscie12@dce.harvard.edu">cscie12@dce.harvard.edu</a></p><p class="global"><a href="http://www.harvard.edu/">Harvard University</a> |
    <a href="http://www.extension.harvard.edu/">Extension School</a></p></footer>
div class="example"  title="float left and right and parent div" ex:norender="1"><p>Lorem ipsum dolor sit amet, consectetuer
  adipiscing elit. Sed feugiat nisi at sapien. Phasellus varius tincidunt ligula. Praesent
  nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreet neque,
  non pellentesque mauris turpis eu purus.</p><footer><p class="course"><a href="http://cscie12.dce.harvard.edu/">CSCI E-12 Home</a> |
    <a href="mailto:cscie12@dce.harvard.edu">cscie12@dce.harvard.edu</a></p><p class="global"><a href="http://www.harvard.edu/">Harvard University</a> |
    <a href="http://www.extension.harvard.edu/">Extension School</a></p></footer>

Markup
Style
Screenshot

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at sapien. Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreet neque, non pellentesque mauris turpis eu purus.</p>
<footer><p class="course"><a href="http://cscie12.dce.harvard.edu/">CSCI E-12 Home</a>|<a href="mailto:cscie12@dce.harvard.edu">cscie12@dce.harvard.edu</a></p>
<p class="global"><a href="http://www.harvard.edu/">Harvard University</a>|<a href="http://www.extension.harvard.edu/">Extension School</a></p>
</footer>div class="example" title="float left and right and parent div" ex:norender="1"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at sapien. Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreet neque, non pellentesque mauris turpis eu purus.</p>
<footer><p class="course"><a href="http://cscie12.dce.harvard.edu/">CSCI E-12 Home</a>|<a href="mailto:cscie12@dce.harvard.edu">cscie12@dce.harvard.edu</a></p>
<p class="global"><a href="http://www.harvard.edu/">Harvard University</a>|<a href="http://www.extension.harvard.edu/">Extension School</a></p>
</footer>

In style element (<style type="text/css">) within head element:

footer {
    background-color: #fcf; 
    float: left;
    width: 100%;
    border-top: thin solid #333;     
}
footer p.course { float: right; }
footer p.global { float: left; }
footer p {
  padding: 0.25em 0.5em 0.25em 0.5em;
  font-size: small;
}
footer a:link, 
footer a:visited, 
footer a:hover, 
footer a:active {
  text-decoration: none;
  color: navy;
  font-weight: bold;
  padding: 0.25em; 
}
footer a:hover {
  color: #ccf;
  background-color: navy;
}footer {
    background-color: #fcf; 
    overflow: auto;
    width: 100%;
    border-top: thin solid #333;     
}
footer p.course { float: right; }
footer p.global { float: left; }
footer p {
  padding: 0.25em 0.5em 0.25em 0.5em;
  font-size: small;
}
footer a:link, 
footer a:visited, 
footer a:hover, 
footer a:active {
  text-decoration: none;
  color: navy;
  font-weight: bold;
  padding: 0.25em; 
}
footer a:hover {
  color: #ccf;
  background-color: navy;
}

float opposite