## Float and a Flexible "Grid"

It is important to set height and width !

Without setting height and width:

Setting height and width:

Example 10.44
Example 10.44 Source:
<div id="gallery" > <div><img src="images/777-t-1.jpg" alt="777" /><br/>Boeing 777</div> <div><img src="images/777-t-2.jpg" alt="777" /><br/>Boeing 777</div> <div><img src="images/777-t-3.jpg" alt="777" /><br/>Boeing 777</div> <div><img src="images/777-t-4.jpg" alt="777" /><br/>Boeing 777</div> <div><img src="images/777-t-5.jpg" alt="777" /><br/>Boeing 777</div> <div><img src="images/777-t-6.jpg" alt="777" /><br/>Boeing 777</div> <div><img src="images/787-t-1.jpg" alt="777" /><br/>Boeing 787 Dreamliner</div> <div><img src="images/787-t-2.jpg" alt="777" /><br/>Boeing 787 Dreamliner</div> <div><img src="images/bbj-t-1.jpg" alt="777" /><br/>Boeing Business Jet</div> </div>
In style element (`<style type="text/css">`) within head element:
#gallery div { float: left; width: 150px; height: 150px; padding: 5x; border: thin dotted #ccc; margin: 5px; text-align: center; font-size: x-small; } #gallery div img { padding-top: 5px; } body { font-family: arial,helvetica,sans-serif; }
Example 10.44 Rendered:

- With Styles
- Without Styles