2

I know this can be achieved with floats pretty easily, but I'm trying to move away from that practice. How might I achieve equal results using display: inline-block; rather than floats?

Here is some code with inline-block: https://jsfiddle.net/hg7wx64k/

Here is some code with floats: https://jsfiddle.net/hg7wx64k/

#content-container {
  width: 100%;
  height: 100%;
  text-align: center;
  margin: 0 50px 0 50px;
}

#box1 {
  display: inline-block;
  height: 100%;
  width: 30%;
  background-color: orange;
}

#box2 {
  display: inline-block;
  height: 100%;
  width: 30%;
  background-color: blue;
}

#box3 {
  display: inline-block;
  height: 100%;
  width: 30%;
  background-color: yellow;
}
<div id="content-container" class="container">
  <div id="box1">
    <h1>Box 1</h1>
  </div>
  <div id="box2">
    <h1>Box 2</h1>
  </div>
  <div id="box3">
    <h1>Box 3</h1>
  </div>
</div>

Here is a screenshot of the 3 boxes I'd like to have equal margins on both sides. I've thought of just manually setting the margins, but didn't know if this would be the cleanest solution. There's a lot I can do, but I'm trying to be more clean with my work. As well, this project I will not be using Bootstrap's grid system in so please no recommendations on that.

Just looking for what you guys would consider the most organized and functional method.

enter image description here

CodeSpent
  • 1,684
  • 4
  • 23
  • 46
  • 1
    @dippas how it's a duplicate ? The asker already did this, he have the 3 Divs side by side[Using inline-block of float], he want to have a way to control the spacing .. maybe there is another duplicate but this one is not suitable – Temani Afif May 20 '18 at 21:27
  • https://www.google.com/search?q=3+Divs+centered+in+div+site:stackoverflow.com – dippas May 20 '18 at 21:29
  • 1
    @dippas sorry but the question it's not about centring 3 divs ... – Temani Afif May 20 '18 at 21:30
  • I'd argue this is more of a "Here's 3 ways I could do this, what is best practice?" question more-so than a "How do I do this?" question. – CodeSpent May 20 '18 at 21:31
  • 2
    Of course it is. – CodeSpent May 20 '18 at 21:36

2 Answers2

0

If you want to consider inline-block no need to specify margin. You simply need to set the width and center the elements.

#content-container {
  text-align: center;
  font-size:0;
}
#content-container > div {
  display: inline-block;
  height: 100px;
  width: 30%;
  font-size:initial;
  animation:anime 2s infinite linear alternate;
}


#box1 {
  background-color: orange;
}

#box2 {
  background-color: blue;
}

#box3 {
  background-color: yellow;
}

@keyframes anime {
  from {
    width:30%;
  }
  to {
    width:20%;
  }

}
<div id="content-container" class="container">
  <div id="box1">
    <h1>Box 1</h1>
  </div>
  <div id="box2">
    <h1>Box 2</h1>
  </div>
  <div id="box3">
    <h1>Box 3</h1>
  </div>
</div>

But if you want to control the margin and the width to be set automatically, consider using flexbox like this:

#content-container {
  padding: 0 50px; /*To control the space*/
  display: flex;
  animation: anime 2s infinite linear alternate;
}

#content-container>div {
  flex: 1; /*Make the 3 divs the same width and fill the space*/
  text-align: center;
}

#box1 {
  background-color: orange;
}

#box2 {
  background-color: blue;
}

#box3 {
  background-color: yellow;
}

@keyframes anime {
  from {
    padding: 0 50px;
  }
  to {
    padding: 0 100px;
  }
}
<div id="content-container" class="container">
  <div id="box1">
    <h1>Box 1</h1>
  </div>
  <div id="box2">
    <h1>Box 2</h1>
  </div>
  <div id="box3">
    <h1>Box 3</h1>
  </div>
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • 1
    Perfect, this was the answer I was looking for. Trying to better understand the shoulds and shouldn'ts as I look back on some previous dirty dirty work. I applied this to current project achieving exactly what I'm looking for with much less code, and moving on to better understand flexbox from here. – CodeSpent May 20 '18 at 21:29
-1

Use display flex on the container. It's the modern way to align things.

Read more on flexbox

#content-container {
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
}

 #box1 {
  height: 100%;
  width: 30%;
  background-color: orange;
}

 #box2 {
  height: 100%;
  width: 30%;
  background-color: blue;
}

 #box3 {
  height: 100%;
  width: 30%;
  background-color: yellow;
}
      <div id="content-container" class="container">
        <div id="box1">
        <h1>Box 1</h1>
        </div>
        <div id="box2">
          <h1>Box 2</h1>
        </div>
        <div id="box3">
          <h1>Box 3</h1>
        </div>
      </div>
Mohamed Ramrami
  • 12,026
  • 4
  • 33
  • 49