Floating Groups of Images

Sailing Categories of Pictures Think you had a web page with lots of images, maybe one with pictures of each personnel in a company. If all of images were the same size, it would be very easy to use the flow property and let the technique instantly place them in wrinkles across the site. The following value reveals one way to achieve this process, by putting each of images (and their associated with captions) into individual divs.
<div class="thumbnail">
<img src="jsmith.gif" alt="Jeff Smith, CEO" /><br />
<p>Jeff Smith, CEO</p>
</div>
<div class="thumbnail">
<img src="mclark.gif" alt="Mary Clark, CFO" /><br />
<p>Mary Clark, CEO</p>
</div>
<div class="thumbnail">
<img src="ldaniels.gif" alt="Laura Daniels, CTO" /><br />
<p>Laura Daniels, CTO</p>
</div>

hen you would add the announcement for that thumbnail category to your design sheet:



The float: eventually left code informs the technique to put the first picture next to the eventually left edge of the site. Then, each following picture with the float: eventually left design follows suit and rests in a row next to the first picture, until it gets to the right edge of the technique. If the technique is start wide enough for all the sailed pictures to fit in a single row, they will do so. If the user has the technique screen start only enough for two pictures to fit in a row, then the staying pictures will begin a new row within the first row (starting again near the eventually left margin).
This is the true meaning of a “liquid layout” in web design, because the site is able to grow or reduce according to the technique screen size. Compare below two results to see an example of this sailing concept in action.

A very simple design sheet allows these three photos to flow next to each other on the page:
                          

That same style sheet lets the internet browser move the images according to the width of the internet browser window: