## Float Opposite

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

Example 10.40
Example 10.40 Source:
<div class="footer" > <p class="course" > <a href="http://cscie12.dce.harvard.edu/" shape="rect" >CSCI E-12 Home</a> | <a href="mailto:cscie12@fas.harvard.edu" shape="rect" >cscie12@fas.harvard.edu</a> </p> <p class="global" > <a href="http://www.harvard.edu/" shape="rect" >Harvard</a> | <a href="http://www.dce.harvard.edu/" shape="rect" >DCE</a> </p> </div>
In style element (`<style type="text/css">`) within head element:
div.footer { background-color: #ccf; border-top: thin solid #333; } div.footer p.course { float: left; } div.footer p.global { float: right; } div.footer p { padding: 0.25em 2em 0.25em 2em; font-size: small; } div.footer a:link, div.footer a:visited, div.footer a:hover, div.footer a:active { text-decoration: none; color: navy; font-weight: bold; padding: 0.25em; } div.footer a:hover { color: #ccf; background-color: navy; }
Example 10.40 Rendered:

- With Styles
- Without Styles

The background color of the parent `div` did not display. The content of this `div` has been "floated," therefore it has been removed from the calculation of its box model. The parent `div` size is null. Solution: float the parent `div`. Recall that a float is always with respect to the containing box.

Example 10.41
Example 10.41 Source:
<div class="footer" > <p class="course" > <a href="http://cscie12.dce.harvard.edu/" shape="rect" >CSCI E-12 Home</a> | <a href="mailto:cscie12@fas.harvard.edu" shape="rect" >cscie12@fas.harvard.edu</a> </p> <p class="global" > <a href="http://www.harvard.edu/" shape="rect" >Harvard</a> | <a href="http://www.dce.harvard.edu/" shape="rect" >DCE</a> </p> </div>
In style element (`<style type="text/css">`) within head element:
div.footer { background-color: #ccf; float: left; border-top: thin solid #333; } div.footer p.course { float: right; } div.footer p.global { float: left; } div.footer p { padding: 0.25em 2em 0.25em 2em; font-size: small; } div.footer a:link, div.footer a:visited, div.footer a:hover, div.footer a:active { text-decoration: none; color: navy; font-weight: bold; padding: 0.25em; } div.footer a:hover { color: #ccf; background-color: navy; }
Example 10.41 Rendered:

- With Styles
- Without Styles