+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Webmasters (https://hackforums.net/forumdisplay.php?fid=141)
+---- Forum: Website Construction (https://hackforums.net/forumdisplay.php?fid=50)
+---- Thread: HTML/CSS multiple columns (/showthread.php?tid=5568622)
HTML/CSS multiple columns - DaemonSic - Mar 7, 2017
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. What is the way to make this?
Icons to be aligned to heading, and paragraph to be just underneath the heading.
![[Image: 9K61qNi.png]](https://i.imgur.com/9K61qNi.png)
* - Nerdi - Mar 7, 2017
The easiest way is with a table, the best way is with divs and CSS.
* - Vitesse - Mar 7, 2017
(Mar 7, 2017 03:27 AM)DaemonSic Wrote: 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. What is the way to make this?
Icons to be aligned to heading, and paragraph to be just underneath the heading.
Or you could use bootstrap and look in to their grid system... makes your life much easier...
Look in to this: https://v4-alpha.getbootstrap.com/layout/grid/
* - ryan⚜ - Mar 7, 2017
You could do something like this.
http://codepen.io/cybercustom/pen/vxyxaZ
* - Nozemi™ - Mar 7, 2017
I'd do this:
Code
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
CSS:
.container {
text-align: center;
}
.container > .item {
display: inline-block;
width: 30%;
}Something like this, or there is also Bootstrap (and other pre-made stylings out there) that have grid layouts.
* - Rushax - Mar 7, 2017
Ryan's solution is ideal.