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

## 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)

- 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)

- 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