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.

What have you tried so far? You can simply use pure css to do that... — DevMoutarde
– DevMoutarde, Commented Mar 7, 2017 at 10:32
You can use bootstrap columns to get the 3 column per row structure. — Neil
– Neil, Commented Mar 7, 2017 at 10:33
Flexbox, but the paragraph is not aligned under heading..it is just under — Boris
– Boris, Commented Mar 7, 2017 at 10:33
Bootstrap would be a nice solution indeed.. its up to you ! it may be a bit complicated for nothing but then would help you design the rest of your website easily aswell — DevMoutarde
– DevMoutarde, Commented Mar 7, 2017 at 10:34

Mr. Hugo · Accepted Answer · 2017-03-07 10:38:49Z

1

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

edited Mar 7, 2017 at 10:38

answered Mar 7, 2017 at 10:33

Mr. Hugo

12.7k3 gold badges47 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mr. Hugo Over a year ago

Please suggest flexbox here... ;-)

Jon P · Accepted Answer · 2017-03-08 00:47:02Z

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>

Collectives™ on Stack Overflow

HTML/CSS multiple columns

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related