: How to arrange items in a tile like format in a web page? I've created a simple video & photo sharing website. I want to arrange the preview (thumbnail view) of photos and videos in a

@Kaufman445

I understand the question was about tags only, however a thing I think you should consider using is a jQuery plugin called Isotope. It does all the tiling for you, allowing you to arrange elements of different dimensions and aspect ratios in a well-aligned and good-looking grid.

Link to the plugin: isotope.metafizzy.co/

Vote Up Vote Down

@Si4351233

I would use a div tag. I would then use CSS to give them a specific height and width and float them to the left.

By controlling the height and width you have more control over the spacing in-between the divs.

For example, if you wanted a grid of 150x150 thumbnails.

div.thumbnail {
height: 150px;
width: 150px;
float: left;
}

Vote Up Vote Down

@Heady270

The nice thing about tables is that they are very easy to define a grid with a fixed number of rows and columns. If the content in one cell is over-sized, the table will expand to accommodate it.

On the other hand, divs can be more dynamic. You can have 10 of them across when the window is maximized and 4 across when it is narrower with dynamic layout between the two. For divs, you will want to make each one a fixed size (both width and height), put some padding around them, and make sure they float left. Here is some CSS that I am using on my homepage to make a tile layout. Each div has a class=item on it. I'm using min-height rather than height so that the divs expand vertically if I put too much stuff in them. Older IE versions didn't support this, but I think it works ok now.

.item {
padding:.2cm;
float:left;
width:6cm;
min-height:5cm;
border:thin black ridge;
margin:.1cm;
font-size:medium;
}

Vote Up Vote Down