Harvard Extension School, Fall 2018
CSCI E-12 Fundamentals of Web Site Development

## Float

Float takes the block out of the flow of the containing block and moves it (right or left) within the containing block.

Example 4.3 - float: none; - Example 4.3 (Without Styles) | <p><img src="http://cscie12.dce.harvard.edu/resources/images/777-t-1.jpg" alt="777"/>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. Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit amet nulla fringilla semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede lobortis velit, nec placerat dolor pede nec nibh. Donec fringilla. Duis adipiscing diam at enim. Vestibulum nibh.</p>img { float: none; border: thin dotted black; padding: 5px; }

- Markup
- Style
- Screenshot

    <p><img src="images/777-t-1.jpg" alt="777"/>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. Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit amet nulla fringilla semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede lobortis velit, nec placerat dolor pede nec nibh. Donec fringilla. Duis adipiscing diam at enim. Vestibulum nibh.</p>

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

    img {
      float: none;
      border: thin dotted black;
      padding: 5px;
      }

Example 4.4 - float: right; - Example 4.4 (Without Styles) | <p><img src="http://cscie12.dce.harvard.edu/resources/images/777-t-1.jpg" alt="777"/>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. Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit amet nulla fringilla semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede lobortis velit, nec placerat dolor pede nec nibh. Donec fringilla. Duis adipiscing diam at enim. Vestibulum nibh.</p>img { float: right; clear: none; border: thin dotted black; padding: 5px; }

- Markup
- Style
- Screenshot

    <p><img src="images/777-t-1.jpg" alt="777"/>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. Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit amet nulla fringilla semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede lobortis velit, nec placerat dolor pede nec nibh. Donec fringilla. Duis adipiscing diam at enim. Vestibulum nibh.</p>

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

    img {
      float: right;
      clear: none;
      border: thin dotted black;
      padding: 5px;
      }

Copyright © David Heitmeyer