Tips & Tricks: How to Make Colored Boxes Align in a Row

How to Make Colored Boxes
Align in a Row

What You Will Learn

We've already gone over how to make a colored box, but that code only lets you make one colored box per line. Which is great, but you can't make two boxes sit side by side that way and sometimes that's really what you want to do.

I've gotten a lot of questions about this and sadly I didn't have an answer. Which was super annoying. So I dedicated my lunch hour last Friday to finally trying to figure out how to do this, and success! So now today we're going to learn how to make colored boxes sit next to one another! 

Your text here!

Your text here!

Your text here!

Your text here!

Let's Do This!

Step 1: The Code

<center><table border="0" cellspacing="4"><tbody>
<tr> <td bgcolor="#B0171F" style="color: white;">Your text here!</td><td bgcolor="#4B0082" style="color: white;">Your text here!</td> <td bgcolor="#00688B" style="color: white;">Your text here!</td><td bgcolor="FF6347" style="color: white;">Your text here!</td> </tr>
</tbody></table>
</center>

Step 2: Setting the alignment

<center><table border="0" cellspacing="4"><tbody>
<tr> <td bgcolor="#B0171F" style="color: white;">Your text here!</td><td bgcolor="#4B0082" style="color: white;">Your text here!</td> <td bgcolor="#00688B" style="color: white;">Your text here!</td><td bgcolor="FF6347" style="color: white;">Your text here!</td> </tr>
</tbody></table>
</center>

Want your boxes to align in the center of your screen? Great! Copy the code exactly.

Want your boxes to align to the left? Replace the word "center" with the word "left"

Want your boxes to align to the right? Replace the word "center" with the word "right"

Easy peasy!

Step 3: Setting the borders

<center><table border="0" cellspacing="4"><tbody>
<tr> <td bgcolor="#B0171F" style="color: white;">Your text here!</td><td bgcolor="#4B0082" style="color: white;">Your text here!</td> <td bgcolor="#00688B" style="color: white;">Your text here!</td><td bgcolor="FF6347" style="color: white;">Your text here!</td> </tr>
</tbody></table>
</center>

See the zero? That's because I have no borders on here. If you want borders, then go ahead and add a number there instead of zero. Play around with the numbers until you get a border thickness you like. The larger the number you put in there, the thicker your borders.

Step 4: Setting the space between your boxes

<center><table border="0" cellspacing="4"><tbody>
<tr> <td bgcolor="#B0171F" style="color: white;">Your text here!</td><td bgcolor="#4B0082" style="color: white;">Your text here!</td> <td bgcolor="#00688B" style="color: white;">Your text here!</td><td bgcolor="FF6347" style="color: white;">Your text here!</td> </tr>
</tbody></table>
</center>

"Cellspacing" describes the amount of white space you see between my color boxes. The larger the number, the wider the space. If you don't want any space between your boxes, then change this number to 0 (that's a zero, not the letter o). 

Step 5: Setting the background color

<center><table border="0" cellspacing="4"><tbody>
<tr> <td bgcolor="#B0171F" style="color: white;">Your text here!</td><td bgcolor="#4B0082" style="color: white;">Your text here!</td> <td bgcolor="#00688B" style="color: white;">Your text here!</td><td bgcolor="FF6347" style="color: white;">Your text here!</td> </tr>
</tbody></table>
</center>

Pull up your handy dandy color code list (I like using this one) and pick whatever color you want to use! Make sure you use the "Hex" color code (you'll see a column in the link I gave called "Hex") and make sure you include the #

In my example code, I have four colored boxes, and so you'll see this code used four times. You can use a different color code for each box, or you can use the same color each time. Mix it up however you prefer!

Note: If you know the HTML acceptable name of the color you want to use, then you can type that name in instead of the number sign and letters. 

Step 6: Setting the font color

<center><table border="0" cellspacing="4"><tbody>
<tr> <td bgcolor="#B0171F" style="color: white;">Your text here!</td><td bgcolor="#4B0082" style="color: white;">Your text here!</td> <td bgcolor="#00688B" style="color: white;">Your text here!</td><td bgcolor="FF6347" style="color: white;">Your text here!</td> </tr>
</tbody></table>
</center>

See the note in step 5 about using the name of the color if you know it? That's what I did in this example. If you don't know the name of the color you want to use, then just do it the same way you did with the background color (select your color from the list and then copy the Hex code. But, helpful hint, that list I gave you? The names of the colors there are the HTML acceptable names!). 

Same as step 5, you'll see this code four times because I have four boxes. You can set them all for the same font color or you can mix them up however you'd like.

Step 7: What if I want colored boxes next to each other AND on top of each other?

Your text here!	Your text here!	Your text here!
Your text here!

<center><table border="0" cellspacing="4"><tbody>
<tr> <td bgcolor="#B0171F" style="color: white;">Your text here!</td><td bgcolor="#4B0082" style="color: white;">Your text here!</td> <td bgcolor="#00688B" style="color: white;">Your text here!</td></tr>
<tr><td bgcolor="FF6347" style="color: white;">Your text here!</td> </tr>
</tbody></table>
</center>

See the tags with the "tr" inside? Those are the tags that determine what line your box sits on in relation to your other boxes.

See how between my first two "tr" tags I have code for three colored boxes? Now check out my colored boxes above. See how I have three colored boxes in a row? If you want three colored boxes next to each other all in the same row, then you need to put your "tr" tags BEFORE your first box code and AFTER your last box code.

Then, if you want to make a second row, just put new "tr" tags around more colored box code and then all of the boxes you include in those tags will appear together in a separate row. Make sense?

Step 8: Can we break that code down one more time?

<center><table border="0" cellspacing="4"><tbody>
<tr> <td bgcolor="#B0171F" style="color: white;">Your text here!</td><td bgcolor="#4B0082" style="color: white;">Your text here!</td> <td bgcolor="#00688B" style="color: white;">Your text here!</td><td bgcolor="FF6347" style="color: white;">Your text here!</td> </tr>
</tbody></table>
</center>

The code in blue is the code you always need to have, regardless of how many boxes and rows you want. This sets the basic parameters of your colored boxes.

The code in pink is the code for one colored box. If you want multiple boxes, then just copy that code as many times as you want boxes.

I hope that helps!
Have any questions? Feel free to ask in the comments!

Click here to read previous Tips & Tricks Posts Tweet