HTML/CSS multiple columns

Question

I am trying to figure out the best way to create this:

The black square represents small icons, and there is heading and paragraph of that certain section. The icons should be aligned to the heading. The paragraph should be just underneath the heading.

Answer 1

If you're just displaying icons, I would not use an image tag at all as they are not "content" per-se. I'd be using background images.

ul {
  list-style: none;
  padding: 0;
}

li {
  background-repeat: no-repeat;
  float: left;

  /*Adjust the below lines based on your icon size*/
  padding-left: 55px;
  width: calc(33% - 55px);
  
}

h2 {
  /*Adjust the below lines based on your icon size and aligning requirements*/
  margin-top: 12px;
  margin-bottom: 25px;
}

.bill {
  background-image: url(http://fillmurray.com/50/50);
}

.city {
  background-image: url(http://lorempixel.com/output/city-q-c-50-50-7.jpg);
}

.cat {
  background-image: url(http://lorempixel.com/output/cats-q-c-50-50-7.jpg);
}

.food {
  background-image: url(http://lorempixel.com/output/food-q-c-50-50-7.jpg);
}

.sports {
  background-image: url(http://lorempixel.com/output/sports-q-c-50-50-7.jpg);
}

<ul>
  <li class="bill">
    <h2>Bill Murray</h2>
    <p>Some Para</p>
  </li>
  <li class="city">
    <h2>City</h2>
    <p>Some Para</p>
  </li>
  <li class="cat">
    <h2>Cat</h2>
    <p>Some Para</p>
  </li>
  <li class="food">
    <h2>F00d</h2>
    <p>Some Para</p>
  </li>
  <li class="sports">
    <h2>Sports</h2>
    <p>Some Para</p>
  </li>
  <li class="bill">
    <h2>Bill Murray</h2>
    <p>Some Para</p>
  </li>
  <li class="cat">
    <h2>Cat</h2>
    <p>Some Para</p>
  </li>
</ul>

Answer 2

I would use absolute positioned icons with a negative margin and float for the 3 columns with a width of 33.33%.

HTML:

<div class="row">
  <div class="col"><img src="" /><h2>Heading</h2><p>Paragraph</p></div>
  <div class="col"><img src="" /><h2>Heading</h2><p>Paragraph</p></div>
  <div class="col"><img src="" /><h2>Heading</h2><p>Paragraph</p></div>
</div>

CSS:

* {box-sizing: border-box;}
.row {overflow: auto;}
.col {width: 33.33%; float: left; padding-left: 100px;}
.col img {position: absolute; width: 80px; margin-left: -100px;}

@media (max-width: 991px) {.col {width: 100%;}}

Here a working demo: http://codepen.io/anon/pen/bqBNeL