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:<

Answer 1

I think Correct answer is only half correct, the default behaviour of flex items is set to flex-grow 1, so if items needed they will take extra space if they need it.

Need to remove that behaviour so the items do not grow or shrink.

See snippet bellow.

.grid {
  display: flex;
  justify-content: space-betwen;
}

.grid .item {
  border: 2px solid tomato;
}

.grid .item2 {
  color: red;
  border: 2px solid blue;
  flex: 0 0 33%;
}

<div class="grid">
  <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque itaque id unde rerum et, ipsa iusto placeat, tempora cupiditate cumque sapiente nostrum, suscipit quidem consectetur totam commodi qui quis doloremque? Lorem, ipsum dolor sit amet consectetur
    adipisicing elit. Laudantium quos error voluptatum atque veniam earum culpa, odio impedit minima quis quia id! Consequuntur adipisci id distinctio! Voluptas pariatur quasi accusamus!</div>
  <div class="item">Same Content</div>
  <div class="item">Same Content</div>
</div>

<br>

<div class="grid">
  <div class="item2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque itaque id unde rerum et, ipsa iusto placeat, tempora cupiditate cumque sapiente nostrum, suscipit quidem consectetur totam commodi qui quis doloremque? Lorem, ipsum dolor sit amet consectetur
    adipisicing elit. Laudantium quos error voluptatum atque veniam earum culpa, odio impedit minima quis quia id! Consequuntur adipisci id distinctio! Voluptas pariatur quasi accusamus!</div>
  <div class="item2">Same Content</div>
  <div class="item2">Same Content</div>
</div>

Answer 2

Here's a plunker I made with the solution you're looking for. The code that makes it work is below. I'm sure there might be an easier solution with flexbox, but this works with older browsers that don't support flexbox (looking at you, IE <= 9). Notice how I included the comments between the .box elements. This is because without them the whitespace is included when doing the inline-block width calculations and the last element ends up wrapping to the next line. Hopefully this helps!

.box {
    width:calc(33.3333333% - 10px);
    display:inline-block;
    background:#777;
    margin:0 10px;
    text-align:center;
  }

  .box:first-child, .box:last-child {
    margin:0;
    width:calc(33.333333% - 5px);
  }

Answer 3

What about an easy CSS grid solution:

.container {
  display: grid;
  grid-gap: 10px;  /* Simply adjust this value !*/
  grid-template-columns: repeat(3, 1fr); /* OR grid-template-columns: 1fr 1fr 1fr;*/
  grid-auto-rows: 1fr;
  border:1px solid green 
}

.container>div {
  border: 1px solid red;
  height: 20px;
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
</div>

Answer 4

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/

Answer 5

The gap between would be variable, or width can't be always 33% (3x33% + 2x10px can be more/less then viewport).

Then the code is simple:

#wrapper {background: red;}
.inner {width: 33%; margin: 0 auto; background: green;}
.left {float: left;}
.right {float: right;}

<div id=wrapper>
  <div class="inner left">inner left</div>
  <div class="inner right">inner right</div>
  <div class="inner">inner middle</div>
</div>

If width should be variable and the gap between divs always 10px, change width: 33% for width: calc((100% - 20px) / 3);.