How to make 4 perfectly aligned boxes with CSS

by Aoki - 01-10-2015, 10:14 PM
oldfag
Posts:
5,753
Joined:
Jan 2015
Likes:
1,566
Credits:
17,460
Reputation:
237
3 Years of Service
#1
OP
Posted: 01-10-2015, 10:14 PM
Hello,

I've had a lot of troubles in the past, on how to make multiple boxes in one row. For people which barely know CSS, this can be really tricky.
This can come in handy, when you're going to make an upgrade page in example.

It will look like this:

[Image: 6b3mi.png]

First, we're going to make the CSS for the boxes.



1. We're going to make a container, where we can put the boxes in.

Code:
.container {
   background: #202020;
   padding: 20px;
   box-sizing: border-box;
   width: 90%;
   margin: 50px auto;
   overflow: hidden;
}

Why "box-sizing: border-box;"?
- We've added "padding" to the container, therefore it won't affect the total width of the container.

Why "overflow: hidden;"?
- Since we're going to use"float", the boxes would overlap with the container. This little trick fixes it.

2. We're going to 4 columns.

Code:
.col-25 {
   width: 25%;
   float: left;
}

Like I said above, if we'd not use "overflow: hidden;", it'd overlap with the container.
This basically creates one column with a width of 25%. We're going to use this 4 times, for a total width of 100% - Makes sense, mh? :yus:



3. The actual box

Now, we're going to make the actual box. This is pretty easy.

Code:
.box {
   background: #303030;
   padding: 50px 10px;
   text-align: center;
}

If you want to change the color, just change the hex code of "background". You can find hex colors here: HTML Color Codes

Padding creates the space in the box. Padding can be determited in 4 directions: Top - Right - Bottom - Left (Correct order)
- In this tutorial, I've added 50px to the top and bottom and 10px to the left and right. If you want to change the width of each padding, just change it to something like: "padding: 1px 2px 3px 4px;".

Preview:

[Image: 2Ez3o.png]



4. Add some spacing between the boxing.

Since the four boxes are stuck together, we're going to add some spacing between them.

Code:
.box-spacer {
   margin: 0 10px;
}

.box-spacer-left {
   margin: 0 10px 0 0;
}

.box-spacer-right {
   margin: 0 0 0 10px;
}

This basically adds margin between the boxes.
For the first box, we're going to use "box-spacer-left", since we don't want margin on the left side. Same on the right side, just with "box-spacer-right".
For the two middle boxes, we're just using the normal "box-spacer".

And that's basically all. Now we have four perfectly aligned boxes in one row.

[Image: Wmzrg.png]



Full Code:

HTML

Code:
<div class="container">
   <div class="col-25">
       <div class="box-spacer-left">
           <div class="box">Aoki</div>
       </div>
   </div>
   <div class="col-25">
       <div class="box-spacer">
           <div class="box">Nulled</div>
       </div>
   </div>
   <div class="col-25">
       <div class="box-spacer">
           <div class="box">Aoki</div>
       </div>
   </div>
   <div class="col-25">
       <div class="box-spacer-right">
           <div class="box">Nulled</div>
       </div>
   </div>  
</div>

CSS

Code:
body {
   background: #151515;
   margin: 0;
   padding: 0;
   color: #a0a0a0;
}  

.container {
   background: #202020;
   padding: 20px;
   box-sizing: border-box;
   width: 90%;
   margin: 50px auto;
   overflow: hidden;
}

.col-25 {
   width: 25%;
   float: left;
}

.box {
   background: #303030;
   padding: 50px 10px;
   text-align: center;
}

.box-spacer {
   margin: 0 0px;
}

.box-spacer-left {
   margin: 0 10px 0 0;
}

.box-spacer-right {
   margin: 0 0 0 10px;
}

Send me a message for help. (Read the help docs first)
Steam Wishlist - Anime Watchlist
Buy Private Proxies
Azmodian
03-11-2015, 09:03 AM
Darko
31-05-2016, 06:14 PM
SE to the max!
Supreme
Posts:
1,323
Joined:
Aug 2015
Likes:
54
Credits:
2,545
Reputation:
95
2 Years of Service
#2
Posted: 01-10-2015, 10:16 PM
Thanks, i could use this nice share.
stains hit my phone cus im trapping lik a bitch, face timing with the plug but my phone on 3%, i got pounds i got zips but i could never serve a nick
لا إله إلا الله‎
Posts:
6,343
Joined:
Jan 2015
Likes:
313
Credits:
20
Reputation:
168
3 Years of Service
#3
Posted: 02-10-2015, 04:11 PM
Would help making simple profile page like FC was having.
Thanks for share
| A- Best forever .. | Legend - ;) | Addicted | Senpai | sad | Sensei | H | fdigl |
[Image: gZD4Fba.png]

y u so shit
Posts:
6,599
Joined:
Feb 2015
Likes:
140
Credits:
5,879
Reputation:
93
2 Years of Service
#4
Posted: 03-10-2015, 11:23 AM
Sleek and sexy, yet easy to learn and utilize. Nice share Tongue.
The Pengest Turkey

[Image: The-Chicken-Connoisseur-PENGEST-TURKEY-1-1.gif]

Nan Ihier Gelair Mordor
Posts:
2,636
Joined:
Jan 2015
Likes:
313
Credits:
8,143
Reputation:
92
3 Years of Service
#5
Posted: 30-10-2015, 03:24 PM
Tip:

box-sizing: border-box;

won't work on all browsers.

You should always use alternate browser engine prefixed versions too....

-webkit-box-sizing: border-box; /* For Safari */
-moz-box-sizing: border-box;

etc.
Closed Account
Posts:
14
Joined:
Jun 2016
Likes:
1
Credits:
14
Reputation:
-3
1 Year of Service
#6
Posted: 01-06-2016, 10:05 PM
Why not just use PureCSS grids?
Newbie
Posts:
16
Joined:
Aug 2017
Likes:
0
Credits:
1
Reputation:
0
#7
Posted: 19-08-2017, 11:16 PM
Could just use the display: inline-block;
Newbie
Posts:
17
Joined:
Dec 2017
Likes:
0
Credits:
26
Reputation:
0
#8
Posted: 28-12-2017, 06:19 AM
've had a lot of troubles in the past, on how to make multiple boxes in one row. For people which barely know CSS, this can be really tricky.
This can come in handy, when you're going to make an upgrade page in example.

It will look like this:

ou can used float - margin (left - right ) some thing like that bro
Register an account or login to reply
Create an account
Create a free account today and start posting right away. It only takes a few seconds.
Login
Log into an existing account.
1 Guest(s)