Snarfblam Snarfblam - 1 month ago 9
HTML Question

How do I create a table there cells flow/wrap rather than using a rigid grid?

I'm having trouble creating the layout I would like for a website. I don't have too much experience with web design and the only software I have is FrontPage which doesn't seem to do what I want.

I'm trying to create a page with a number of "cells," each containing an image on top with text centered below. I want each cell to have a fixed width and I'd like to have the cells follow a normal "flow," placed besides each other (for example, as inline images would), and have these cells wrap if there isn't enough width to fit them all on one line (again, as inline images would).

The first thing that comes to mind is a table, but a table has a rigid structure of rows and columns rather than flowing and wrapping.

Answer

HTML:

<div class="cell"><img src="img1.png" ...><br>Capture 1</div>
<div class="cell"><img src="img2.png" ...><br>Capture 2</div>
<div class="cell"><img src="img3.png" ...><br>Capture 3</div>
<!-- and so on -->

CSS:

.cell {text-align:center;
       width:200px; /* or whatever you want */
       float:left;
       /* add margin, padding, border style if you wish */
}

See demo.