Slide 17 - Float and a Flexible "Grid" § Session 04

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>

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

float

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

float