Home Upgrade Search Memberlist Extras Hacker Tools Award Goals Help Wiki Contact

HTML/CSS multiple columns

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]
The easiest way is with a table, the best way is with divs and CSS.
(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.
[Image: 9K61qNi.png]

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/
You could do something like this.

http://codepen.io/cybercustom/pen/vxyxaZ
Skype: ryand.8

[Image: XbaG5gl.gif]

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.
[Image: eldrios-small.png]
Ryan's solution is ideal.
Web Designer / Developer & SEO Expert.

View Work
Earn 10% of the job you refer me to!

Skype aerox.design




Possibly Related Threads...
Thread / Author Replies Views Last Post
by HackersSep 28, 2026 01:50 PM 9 369 Sep 28, 2026 01:50 PM
Last Post: JuWacky
by oxagastSep 3, 2022 07:52 AM 0 197 Sep 3, 2022 07:52 AM
Last Post: oxagast
by AerrowsGirlfriendJun 16, 2021 04:17 AM 1 319 Jun 16, 2021 04:17 AM
Last Post: Nachfolger