html - Three divs side by side with spacing in between

Question

I'm trying to have three of divs side by side with spacing in between the div's in the middle.

Here is the image of what I need:

Here is my current code:

<style>
  .box {
    float: left;
    width: 33%;
    background-color: red;
    text-align: center;
    color: #fff;
  }
</style>

<div class="box">Div 1</div>
<div class="box">Div 2</div>
<div class="box">Div 3</div>

The problem with my current code is that it does not have the spacing I need in the middle of div 1 and 2, and div 2 and 3.

Answer 1

You might be better using a flexbox to achieve what you need. Create a container for the three .box divs, and style it with the following:

display:flex;
justify-content:space-between;

Keep in mind that the width of your .box divs will need to be lowered to achieve the space you want and that you would not require the float:left; in the css.

For more info on flexboxes, click here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/