Harvard Extension School
CSCI E-12 Fundamentals of Web Site Development | Spring 2019

## Float Opposite

Use `float: left` and `float: right` for content to be on opposite sides.

Example 4.14 - float left and right - Example 4.14 (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>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; }

- 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;
    }

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.

Solutions:

- float the parent `footer`. Recall that a float is always with respect to the containing box
- Set the `footer` `overflow` property to `auto`

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>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; }

- 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;
    }

Copyright © David Heitmeyer