Question

My knowledge of css and html is fairly limited. I am trying to make tiles that contain an image and one line of text, and these tiles should go next to each other, then continue on the next line if the screen’s width has been used.

This image shows what I need. The blue areas are images, the text below it is horizontally aligned center. The tiles are 160px wide, their height depends on how long the text is, but should be at least 150px. I know I have to work with divs, obviously, but I can’t really get any further than that.

Answer 1

HTML

    <div><img src=".jpg" width="110" />text</div>
      .
      .
      .
     <div><img src=".jpg" width="110" />text</div>

CSS

div{
    width:160px;
    border:1px solid grey;
    text-align:center;
    min-height:150px;
    height:auto;
    vertical-align:middle;
    padding:8px;
    float:left
}
img{display:block; margin:0 auto}

DEMO

Resize the result part to see the effect

min-height:150px make default height as 150px

height:auto helps to extend the div based on the content.

float:left makes divs to sit next to each other.