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

## Float and a Flexible "Grid"

It is important to set height and width!

Example 4.18 - Making a grid: setting width but not height - Example 4.18 (Without Styles) | <ul class="gallery"><li><img src="http://cscie12.dce.harvard.edu/resources/images/777-t-1.jpg" alt="777"/><br/>Boeing 777</li><li><img src="http://cscie12.dce.harvard.edu/resources/images/777-t-2.jpg" alt="777"/><br/>Boeing 777</li><li><img src="http://cscie12.dce.harvard.edu/resources/images/777-t-3.jpg" alt="777"/><br/>Boeing 777</li><li><img src="http://cscie12.dce.harvard.edu/resources/images/777-t-4.jpg" alt="777"/><br/>Boeing 777</li><li><img src="http://cscie12.dce.harvard.edu/resources/images/777-t-5.jpg" alt="777"/><br/>Boeing 777</li><li><img src="http://cscie12.dce.harvard.edu/resources/images/777-t-6.jpg" alt="777"/><br/>Boeing 777</li><li><img src="http://cscie12.dce.harvard.edu/resources/images/787-t-1.jpg" alt="777"/><br/>Boeing 787 Dreamliner</li><li><img src="http://cscie12.dce.harvard.edu/resources/images/787-t-2.jpg" alt="777"/><br/>Boeing 787 Dreamliner</li><li><img src="http://cscie12.dce.harvard.edu/resources/images/bbj-t-1.jpg" alt="777"/><br/>Boeing Business Jet</li></ul>.gallery li { float: left; width: 150px; padding: 5px; border: thin dotted #ccc; margin: 5px; text-align: center; font-size: x-small; list-style: none; } #gallery li img { padding-top: 5px; } body { font-family: arial,helvetica,sans-serif; }

- Markup
- Style
- Screenshot

    <ul class="gallery">
    <li><img src="images/777-t-1.jpg" alt="777"/><br/>Boeing 777</li>
    <li><img src="images/777-t-2.jpg" alt="777"/><br/>Boeing 777</li>
    <li><img src="images/777-t-3.jpg" alt="777"/><br/>Boeing 777</li>
    <li><img src="images/777-t-4.jpg" alt="777"/><br/>Boeing 777</li>
    <li><img src="images/777-t-5.jpg" alt="777"/><br/>Boeing 777</li>
    <li><img src="images/777-t-6.jpg" alt="777"/><br/>Boeing 777</li>
    <li><img src="images/787-t-1.jpg" alt="777"/><br/>Boeing 787 Dreamliner</li>
    <li><img src="images/787-t-2.jpg" alt="777"/><br/>Boeing 787 Dreamliner</li>
    <li><img src="images/bbj-t-1.jpg" alt="777"/><br/>Boeing Business Jet</li>
    </ul>

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

    .gallery li {
      float: left;
      width: 150px;
      padding: 5px;
      border: thin dotted #ccc;
      margin: 5px;
      text-align: center;
      font-size: x-small;
      list-style: none;
    }
    #gallery li img { padding-top: 5px; }
    body {
      font-family: arial,helvetica,sans-serif;
    }

Example 4.19 - Making a grid: setting height and width - Example 4.19 (Without Styles) | <ul class="gallery"><li><img src="http://cscie12.dce.harvard.edu/resources/images/777-t-1.jpg" alt="777"/><br/>Boeing 777</li><li><img src="http://cscie12.dce.harvard.edu/resources/images/777-t-2.jpg" alt="777"/><br/>Boeing 777</li><li><img src="http://cscie12.dce.harvard.edu/resources/images/777-t-3.jpg" alt="777"/><br/>Boeing 777</li><li><img src="http://cscie12.dce.harvard.edu/resources/images/777-t-4.jpg" alt="777"/><br/>Boeing 777</li><li><img src="http://cscie12.dce.harvard.edu/resources/images/777-t-5.jpg" alt="777"/><br/>Boeing 777</li><li><img src="http://cscie12.dce.harvard.edu/resources/images/777-t-6.jpg" alt="777"/><br/>Boeing 777</li><li><img src="http://cscie12.dce.harvard.edu/resources/images/787-t-1.jpg" alt="777"/><br/>Boeing 787 Dreamliner</li><li><img src="http://cscie12.dce.harvard.edu/resources/images/787-t-2.jpg" alt="777"/><br/>Boeing 787 Dreamliner</li><li><img src="http://cscie12.dce.harvard.edu/resources/images/bbj-t-1.jpg" alt="777"/><br/>Boeing Business Jet</li></ul>.gallery li { float: left; width: 150px; height: 150px; padding: 5px; border: thin dotted #ccc; margin: 5px; text-align: center; font-size: x-small; list-style: none; } #gallery p img { padding-top: 5px; } body { font-family: arial,helvetica,sans-serif; }

- Markup
- Style
- Screenshot

    <ul class="gallery">
    <li><img src="images/777-t-1.jpg" alt="777"/><br/>Boeing 777</li>
    <li><img src="images/777-t-2.jpg" alt="777"/><br/>Boeing 777</li>
    <li><img src="images/777-t-3.jpg" alt="777"/><br/>Boeing 777</li>
    <li><img src="images/777-t-4.jpg" alt="777"/><br/>Boeing 777</li>
    <li><img src="images/777-t-5.jpg" alt="777"/><br/>Boeing 777</li>
    <li><img src="images/777-t-6.jpg" alt="777"/><br/>Boeing 777</li>
    <li><img src="images/787-t-1.jpg" alt="777"/><br/>Boeing 787 Dreamliner</li>
    <li><img src="images/787-t-2.jpg" alt="777"/><br/>Boeing 787 Dreamliner</li>
    <li><img src="images/bbj-t-1.jpg" alt="777"/><br/>Boeing Business Jet</li>
    </ul>

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

    .gallery li {
      float: left;
      width: 150px;
      height: 150px;
      padding: 5px;
      border: thin dotted #ccc;
      margin: 5px;
      text-align: center;
      font-size: x-small;
      list-style: none;
    }
    #gallery p img { padding-top: 5px; }
    body {
      font-family: arial,helvetica,sans-serif;
    }

Copyright © David Heitmeyer